为什么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)
答案 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();
}, []);
答案 3 :(得分:0)
您可以使用提供useAsyncEffect
钩子的use-async-effect
软件包:
useAsyncEffect(async () => {
await doSomethingAsync();
});