Javascript 如何使useffect中的异步函数按顺序执行？

控制台1,2,4,5,3,6下方的代码。如何让它安慰1,2,3,4,5,6？ 演示：

constfoo=（）=>{
常量睡眠=（计时器）=>{
返回新承诺（（res）=>{
设置超时（res、定时器）
})
}
React.useffect（（）=>{
控制台日志（1）
const foo=async（）=>{
控制台日志（2）
等待睡眠（1000）；
控制台日志（3）
}
foo（）；
}, []);
React.useffect（（）=>{
控制台日志（4）
const foo=async（）=>{
控制台日志（5）
等待睡眠（1000）；
控制台日志（6）
}
foo（）；
}, []);
返回111
}

如果将Foo设为一个

异步

函数，则可以使用on承诺同步执行。

据我所知，您不能影响调用

useffect

的顺序。在您的情况下，我建议使用单个

useffect

调用。我还建议使用单个useffect，您可以将

useCallback（（async（）=>…）（），[…]）

的结果传递给useffect，这样您就可以使用

wait/async

。使用

状态

切换来运行效果。是的，你说得对，谢谢@Tracer69

const Foo = () => {
  const sleep = (timer) => {
    return new Promise((res) => {
      setTimeout(res, timer)
    })
  }

  React.useEffect(() => {
    console.log(1)
    const foo = async () => {
      console.log(2)
      await sleep(1000);
      console.log(3)
    }
    foo();
  }, []);

  React.useEffect(() => {
    console.log(4)
    const foo = async () => {
      console.log(5)
      await sleep(1000);
      console.log(6)
    }
    foo();
  }, []);

  return <div>111</div>
}