React useEffect 使用异步函数(记录一次掉坑经历)一次React useEffect 使用异步函数导致错误

起因

项目将react 版本升级到18.2.0后，突然发现有一个页面转跳到其他页面必然报错然后白屏，排查后发现是useEffect使用错误导致的。

在页面初始化数据时，使用了异步函数，代码大概是这样的：

function Page1(){
  useEffect(async()=>{
    const data = await fetchData(); 
  },[])
}

很常见的一个异步函数，编译运行也无提示，但是当离开这个页面时，报错大概就是这样的XX is not a function，调试发现，xx是个promise对象。

正常情况下，如果useEffect 有返回值，在组件注销或者依赖更新时候，会调用这个返回值消除副作用，useEffect 的返回必须是函数。上面例子中 async函数会返回 Promise对象，离开页面注销组件时，将Promise对象当作函数调用，会触发报错。

很简单，声明一个函数就行

function Page1(){

  useEffect(()=>{
    async function init(){
      const data = await fetchData();
      // 其他操作
    }
    init();
  },[])
}

总之，一定要确保 useEffect的回调函数返回值是函数或者无返回值。