javascript - 在 Promise.all 中 react setState

Question

我正在做一个项目，我们希望在一个非常慢的 API 上并行运行多个提取。理想情况下，我们希望在收到此数据时为用户填充我们的界面，并以总结的方式进行。这些请求可能会也可能不会按照 API 调用的顺序解决。

带有 setState 的 Promise.all 的大多数用例都涉及在所有 promise 都已解决后设置状态。但是，我认为我想要做的是将状态设置为 child 自己 promise 的副作用。

所以这就是(简化的)我为实现这一目标所做的事情:

  const request = async (setState, endpoint) => {
    const response = await fetch(endpoint);
    const data = response.json();
    setState(state => ({ ...state, ...data }))
  }

  // Called within React component as a side effect
  const fetchAllData = (setState) => {
    Promise.all(
      [
        request(setState, url_1),
        request(setState, url_2),
        request(setState, url_3)
      ]
    )
  }

现在，我正在运行一些测试，这看起来确实有效。我相信我不应该遇到状态竞争条件，因为 setState 正在传递一个函数。但是，我想知道我是否在做一些与 React、更新状态和渲染有关的危险事情。

这张图有什么问题吗？

Answer 1

从每个单独的 promise 中立即更新状态没有错；这会很好用。如果每个请求都尝试更新相同的数据位，您可能会遇到竞争条件，但只要它们写入您状态的不同部分，您就应该没问题(尽管状态更新程序回调模式是必需的)。

您的代码唯一的问题是缺少错误处理，而且 Promise.all 目前有点多余。