React TypeScript 16.8如何使useEffect()异步

时间:2019-07-28 07:49:55

标签: reactjs

为什么useEffect()无法使用异步等待?

const Home: React.FC = () => {

    useEffect(async () => {
        console.log(await ecc.randomKey())
    }, [])

    return (
    ...

我得到的错误是

'()=> Promise'类型的参数不能分配给'EffectCallback'类型的参数。

类型'Promise'不能分配给类型'void | (()=> void | undefined)”。

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

类型'Promise'不提供签名'()的匹配项: undefined'.ts(2345)

4 个答案:

答案 0 :(得分:4)

为什么

useEffect 中使用异步函数会使回调函数返回 Promise 而不是 cleanup function

解决方案

useEffect(() => {
  const foo = async () => {
    await performPromise()
  };

  foo();
}, []);

OR 与 IIFE

useEffect(() => {
  (async () => {
    await performPromise()
  })()
}, []);

答案 1 :(得分:1)

您可以使用异步匿名函数,该函数可以像这样执行自身:

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

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

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

答案 2 :(得分:0)

不建议将效果声明为异步功能。 但是您可以在如下效果内调用异步函数:

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

  genRandomKey();
}, []);

更多内容:React Hooks Fetch Data

答案 3 :(得分:0)

您可以使用提供useAsyncEffect钩子的use-async-effect软件包:

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