Question

这个问题类似于已经被问过的一些问题，例如 (Can you make render() method in React Native async?)，但是到目前为止我发现的这些解决方案都不适合我。我试图从存储中显示一个值，但是它需要异步获取，所以当我试图呈现它时，它返回一个未解决的承诺。这些函数异步存储和获取数据：

const storeData = async () => {
  try {
    const value= "hello"
    await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
  }
}

const getData = async (key:string) => {
  return (<Text>{await AsyncStorage.getItem('@storage_Key')}</Text>)
}

...然后在我的回报中，我试图这样做：

<Button
  onPress={() => storeData()}
  title="Store"
  color="#841584"/>
 {getData()}

我想显示一个保存数据的按钮（我认为可以工作），然后在文本字段中显示该数据。但是，我不断收到未解决的承诺错误。如何在加载值之前交替呈现某些内容，并在没有未解决的承诺的情况下显示数据？

Answer 1

必须使用promise代替async/await函数，最好使用函数式组件而不是类组件。

首先，必须在 AsyncStorage setItem 之后对 setState 使用 useEffect 函数：

const [asyncStorageItemSet, setAsyncStorageItemSet] = React.useState(false);
const [storageKey, setStorageKey] = React.useState('')
React.useEffect(() => {
  AsyncStorage.getItem('@storage_Key').then(res => {
    setStorageKey(res);
})
}, [asyncStorageItemSet])

你的回报是这样的：

<Button
  onPress={storeData}
  title="Store"
  color="#841584"/>
<Text>{storageKey}</Text>

和 storeData 函数看起来像这样：

const storeData = () => {
  const value= "hello"
  AsyncStorage.setItem('@storage_Key', value).then(res => {
    setAsyncStorageItemSet(true)
})}

Answer 2

使用功能组件，您希望

使用 useState 钩子创建一个变量/setter 来保存您最终从 Promise 中获得的值。
使用 useEffect 钩子运行异步进程。

这意味着您将获得至少 2 个渲染：

从你拥有价值之前开始
当你得到结果

第一次渲染该值将不存在。

如果您之前没有使用过这 2 个钩子，请先了解它们。

Answer 3

不，由于异步函数的执行方式不同，异步函数的第一个实例不返回任何内容，这样渲染将返回 null，这值得组件渲染失败，这也许就是我们不能直接调用render内部的Async函数

在渲染函数中反应本机异步调用

3 个答案: