Question

下面是一些代码段：

LOT

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

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是否是个坏主意。

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

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

2 个答案: