javascript - getDetails() 中设置状态发生无限循环

Question

    this.state = {
  data: [],
  details: []

}

     componentDidMount() {
this.getDetails()
this.getCountries()

}

getCountries() {
Utils.rest('POST', 'https:///api-spot-get-all', {
  country: '',
  windProbability: ''
}).then(async (r) => {
  const data = await r.json();
  this.setState({
    data: data.result
  })
}).catch(err => {
  console.log(err.message);
});

}

`getDetails() {
return new Promise((resolve, reject) => {
  let details_list = [];
  this.state.data.map(item => {
    return (
      Utils.rest('POST', 'https:///api-spot-get-details', {
        spotId: item.id
      })
      .then(async (r) => {
        const details_item = await r.json()
console.log(`Loaded ${details_list.length} item ...(of ${this.state.data.length})`);
        if (details_list.length === this.state.data.length) {
          await resolve(details_list)
        }
        details_list.push(details_item.result);
      })
    );
  })
})

}`

 render() {

返回( { this.state.data.map((item, key) => { 返回 ( {项目.id} {项目.id} )； }) }

这是我的代码。第一次通话后，我收到 ID 并将其作为输入传递给第二次通话

Answer 1

我认为发生这种情况是因为您在 render 函数中调用 this.getCountries() 。因此，在每个渲染中都会调用该函数，这会导致设置新状态的新请求，这将触发新的渲染等等，从而创建无限循环。因此，如果您删除从 render 函数调用的函数，它应该可以工作。