javascript - 在循环的每次迭代中使用setState都是不好的做法吗？

这是一些代码片段:

async componentDidMount() {
    ...
    this.state.postList.forEach(element => {
      this.fetchItem(element);
    });
}

async fetchItem(query) {
    ...
    this.setState( previousState => {
        const list = [...previousState.data, data];
        return { data: list };
    });
}

我很好奇，知道在setState循环的每次迭代中使用forEach是否不是一个好主意。我怀疑这会影响性能，但是我想确定，因为这似乎是解决此问题的最简单方法。

最佳答案

如果它直接在迭代中，则肯定是，因为React不需要合并您在迭代中所做的所有更新，这可能比在循环后仅设置状态要花费更多的时间。
但是，在您的情况下，您确实会在每次迭代中启动异步操作，并且由于所有异步任务都在不同的时间完成，因此更新不会一次全部运行。您的方法的主要好处是，如果这些异步任务花费一些时间(例如，如果您为每个任务获取大量数据)，则可以显示一些信息，而某些信息仍在加载中。如果所有这些异步调用仅加载少量数据，那么您实际上应该更改您的API，以一次交付所有数据。因此，它的好坏取决于您的用例。