是否可以在功能React组件中使用承诺值?

Question

我不认为这是功能组件中react promise的副本，因为它触发了事件上的promise。我想显示一个来自Expo的承诺值，特别是SecureStore.isAvailableAsync()。

基本上我想知道我是否可以用功能组件做类似https://www.pluralsight.com/guides/executing-promises-in-a-react-component的事情。

我正在考虑useEffect，但这需要一个void返回参数。

这是我到目前为止所尝试的

const [ secureStorageAvailable, setSecureStorageAvailable ] = React.useState<boolean|null>(null);
React.useEffect(async () => {
return () => setSecureStorageAvailable(await SecureStore.isAvailableAsync());
});

Answer 1

在你第一次尝试的时候，有一些事情需要考虑:

React.useEffect(async () => {
return () => setSecureStorageAvailable(await SecureStore.isAvailableAsync());
});

• 不能将useEffect函数声明为async。你可以声明inside或outside，然后调用in(或者像你所做的那样调用IIFE);
• 返回的函数将只在卸载组件阶段执行;
• 不传递第二个参数导致你的函数在每个组件渲染器上执行;

关于你的方法，它是完全有效的调用作为一个IIFE。可以在外部声明函数然后在内部调用也可以在内部声明函数然后调用

React.useEffect( () => {
const updateSecureStorage = async () => {
setSecureStorageAvailable(await SecureStore.isAvailableAsync());
};
updateSecureStorage()
}, []); // empty array executes only on mount

关于第二个参数告诉useEffect依赖项何时再次运行代码。如果传递一个空数组，则只在挂载时执行。如果你传递一些变量，比如[secureStorageAvailable]，那么每次secureStorageAvailable更新时，它都会再次执行。如果不传递第二个参数，你将面临useEffect在每次渲染时执行它的代码。

Answer 2

我最终让它工作了

const [ secureStorageAvailable, setSecureStorageAvailable ] = React.useState<boolean|null>(null);
React.useEffect( () => {
(async () => {
setSecureStorageAvailable(await SecureStore.isAvailableAsync());
})();
});

但是它看起来很奇怪，因为我在一个匿名函数调用中有一个函数调用。它可以工作，但我不确定它是否正确。