Javascript 如何获取数据，然后使用useEffect（React JS）在加载时异步执行其他任务

我正在努力找出如何执行此操作：

const [stateOne, setStateOne] = useState();
const [stateTwo, setStateTwo] = useState();

useEffect(() => {
  /* fetch data */

  setStateOne(); /* not before data is fetched */
  setStateTwo(); /* not before data is fetched and setStateOne is complete */
},[])

这在概念上正确吗？是否可以在useEffect中异步运行此类任务？

多个效果：

const[asyncA，setAsyncA]=useState（）；
常量[asyncB，setAsyncB]=useState（）；
useffect（（）=>{
（异步（）=>{
setAsyncA（wait apiCall（））；
})();
//装载时获取数据-无依赖项
},[]);
useffect（（）=>{
如果（！asyncA）返回；
（异步（）=>{
setAsyncB（等待apiCall（asyncA））；
})();
//当asyncA准备好后，获取asyncB
}，[asyncA]）；
useffect（（）=>{
如果（！asyncA | |！asyncB）返回；
//都准备好了，做点什么吧
}，[asyncA，asyncB]）

或者，一种效果就是一个异步函数：

useffect（（）=>{
（异步（）=>{
const first=等待apiCallA（）；
常数秒=等待顶点B（第一）；
})();
},[]);

您不能在react钩子中运行

异步

操作，因此您需要在钩子外部提取功能，然后在钩子内部调用，然后创建第二个

效果

，以便在更新状态2后运行

const fetchAction = async () => {
    await fetchData(...)/* fetch data */

    setStateOne(); /* not before data is fetched */
    


}

useEffect(() => {
   
},[])

useEffect(() => {
   setStateTwo(); 
},[StateOne])

---

将async/await与direct arrow函数一起使用

useEffect(() => {
  (async() => {
    /* fetch data */
   // await is holding process till you data is fetched
   const data = await fetchData()
   // then set data on state one
   await setStateOne(); 
   // then set data on state second
   setStateTwo(); 
  })();
},[])

---

这将使您了解如何使用

useffect

const{useState，useffect}=React；
常量应用=（）=>{
常量[stateOne，setStateOne]=useState（null）
常量[StateTower，SetStateTower]=useState（null）
useffect（（）=>{
状态一和呼叫（设置状态二）；
}，[stateOne]）
const call=setState=>{
让被调用=新承诺（解决=>{
设置超时（（）=>{
解析（真）
}, 2000)
})
调用。然后（res=>setState（res））
}
返回(
call（setStateOne）}>拨打电话
stateOne:{JSON.stringify（stateOne）}
stateTwo:{JSON.stringify（stateTwo）}
)  
}
ReactDOM.render(
,
document.getElementById（“react”）
);

如果这两个状态都连接到相同的（一组）API调用，那么它们实际上应该只有一个状态。您不能直接在react钩子内运行异步操作。