React TypeScript 16.8 如何使 useEffect() 异步

Question

为什么

useEffect()

不能使用async-await？

const Home: React.FC = () => {
    
    useEffect(async () => {
        console.log(await ecc.randomKey())
    }, [])
    
    return (
    ...

我得到的错误是

“() => Promise”类型的参数不可分配给“EffectCallback”类型的参数。

类型“Promise”不可分配给类型“void |” (() => void | 未定义)'.

类型“Promise”不可分配给类型“() => void |”未定义'。

类型“Promise”未提供与签名“(): void | 的匹配”未定义'.ts(2345)

Answer 1

不建议将效果声明为异步函数。 但是您可以在效果中调用异步函数，如下所示：

useEffect(() => {
  const genRandomKey = async () => {
    console.log(await ecc.randomKey())
  };

  genRandomKey();
}, []);

更多信息：React Hooks 获取数据

Answer 2

您可以使用IIFE（自行执行的异步匿名函数），如下所示：

useEffect(() => {
    // Some synchronous code.

    (async () => {
        await doSomethingAsync();
    })();

    return () => {
        // Component unmount code.
    };
}, []);

Answer 3

您可以使用

use-async-effect

包，它提供了

useAsyncEffect

钩子：

useAsyncEffect(async () => {
  await doSomethingAsync();
});

Answer 4

我阅读了答案，所有答案都是正确的，但“本机答案”（不使用第三方软件包的答案）不允许您做两件事：

1. 使用 useCallback 优化效果处理程序（因为钩子只能在顶层使用）
2. 在其他地方重用效果处理程序。

我发现这个方法可以同时启用两者

const Component= ()=>{
  const effectHandler = async()=>{
    // Do some async stuff
   }

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


  // reuse effectHandler
   effectHandler()

  return(<></>)
}