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)

原文由 Bill 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

  genRandomKey();
}, []);

更多信息： React Hooks 获取数据

原文由 Tobias Lins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以像这样使用 IIFE （自行执行的异步匿名函数）：

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

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

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

原文由 Daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议