查询使用效果 - 反应钩子

Question

我正在开发一个应用程序，我需要在页面加载时进行多次 API 调用，并且我需要在每次 API 调用时更改组件的单一状态。体系结构如下所示。

const [stateForm, setStateForm] = useState(.....)
useEffect(()=>{
//FIRST API CALL
setStateForm({....})
},[])
useEffect(()=>{
//SECOND API CALL
setStateForm({....})
},[])
useEffect(()=>{
//THIRD API CALL
setStateForm({....})
},[])
//SO ON.....

我的问题是：以这种方式引起副作用可以吗？在每个 useEffect 钩子中更改状态会导致多次重新渲染吗？

Answer 1

以这种方式引起副作用可以吗？

没有错，所以一般没问题。但除此之外，很难说出更明确的话 - 关于使用一系列 API 的结果保持覆盖相同状态的模式，没有太多信息可以判断，这些 API 通常是异步的，完成或失败的时间不明确。

在每个 useEffect 钩子中更改状态会导致多次重新渲染吗？

React 可以批量处理由setStateForm触发的一系列重新渲染，因此只会有一次重新渲染。如果setStateForm必须处理 Promises，那么 React 将不会使用批处理，否则它可能会也可能不会。