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

Question

这是一个小代码段：

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是否是个坏主意。我怀疑这会影响性能，但是我想确定，因为这似乎是解决此问题的最简单方法。

Answer 1

这是另一种方法：更新您fetchItem的商品以仅退还商品。在您componentDidMount使用Promise.all中获取所有项目，然后通过一次操作将它们提交到状态。

async componentDidMount() {
    const items = await Promise.all(this.state.postList.map(element => fetchItem(element)));
    this.setState({data: items});
}

async fetchItem(query) {
    const item = await getItem(query) // however you accomplish this
    return item;
}

Answer 2

我很想知道在 forEach 循环的每次迭代中使用 setState 是否是一个坏主意。

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