我正在做一个项目,我们希望在一个非常慢的 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、更新状态和渲染有关的危险事情。
这张图有什么问题吗?
最佳答案
从每个单独的 promise 中立即更新状态没有错;这会很好用。如果每个请求都尝试更新相同的数据位,您可能会遇到竞争条件,但只要它们写入您状态的不同部分,您就应该没问题(尽管状态更新程序回调模式是必需的)。
您的代码唯一的问题是缺少错误处理,而且 Promise.all
目前有点多余。
关于javascript - 在 Promise.all 中 react setState,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71917186/