Javascript 如何简化React-useEffect钩子中的异步调用

我正在尝试创建最简单的React Hook

useffect

调用，希望不必在

useffect

中创建函数调用。下面是我的代码，它要求我调用

fetchData（）

使其工作。有更简单的版本吗

也许是用一个策略性的async关键字或类似的东西

useEffect(() => {
  const fetchData = async () => {
      let result = await axios.get('http://localhost:4000/');
      console.log(result.data.length);
  };
  fetchData();
}, []);

---

你能做的就是让它成为一种生活：

useffect（（）=>{
常量承诺=（异步（）=>{
让结果=等待axios.get（'http://localhost:4000/');
console.log（result.data.length）；
})();
返回（（）=>{
承诺。然后（（）=>cleanup（））；
});
}, []);

或者使用简单的承诺：

useffect（（）=>{
const promise=axios.get（'http://localhost:4000/）。然后（（结果）=>{
console.log（result.data.length）；
});
返回（（）=>{
承诺。然后（（）=>cleanup（））；
})
}, []);

但这差不多是您所能做的，因为useEffect不能直接异步。来自ESLint：

效果回调是同步的，以防止竞争条件

---

使用axios返回的承诺的

then

块：

useffect（（）=>axios.get（…）.then（result=>console.log（result.data.length）），[]有兴趣看到其他人的答案，但我认为您不能在useEffect中直接进行异步。@ibrahimmahrir，谢谢您的回答。我可能把我的问题简化得太多了。我有一个返回的清理函数，我不希望清理函数在axios异步调用完成之前运行。如果使用，我不确定是否会得到相同的行为。那么，与其等待，不如在
async
iLife结束时调用
cleanup
，或者在
then
的回调结束时调用
cleanup
？因为它在
wait
ed调用完成之前不会被调用anyway@ibrahimmahrir问题是，清理可能应该在卸载之后进行，而不是直接在请求之后进行（虽然我当时可能误解了这个问题，在这种情况下，您是对的，清理任务应该在wait之后或下一个之后直接运行）我想确定的是，异步调用在调用清理之前就完成了。看起来像是在IIFE或promise中，清理可能会在异步完成之前发生。（我对此不确定，但很担心）@Pete，这就是为什么我添加了
承诺。然后（（）=>cleanup（））；
，因为这要么等到请求完成，要么立即运行，如果请求已经完成