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

标签 javascript reactjs

    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 并将其作为输入传递给第二次通话

最佳答案

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

关于javascript - getDetails() 中设置状态发生无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56235924/

相关文章:

javascript - 实时重新加载 React Express 应用程序

javascript - 在大型元素中使用 ReactJS 渲染 CSS 最快

javascript - 在 reactjs 中使用渲染方法之外的函数

javascript - 如何从React JS中的react项目中的公共(public)目录中的文件读取xml?

javascript - addEventListener 点击不起作用

javascript - 将标题悬停在 SVG 圆上

javascript - 来自 div 的行跟随另一个特定的 div

javascript - 如何检测退格键是否被保留

javascript - 获取jquery中可见元素的索引

javascript - 根据ID显示具体数据