React Native 中 AsyncStorage 的顶级等待答案

【问题标题】：Top Level Await for AsyncStorage in React NativeReact Native 中 AsyncStorage 的顶级等待
【发布时间】：2021-03-26 09:59:02
【问题描述】：

我正在尝试在我的 react native 和 expo 环境中实现顶级 await，以便我可以从 AsyncStorage 提取数据并将其存储在一个变量中以在我的应用程序中全局使用。

我正在安卓模拟器上运行该应用程序。我想要做的就是获取数据并在我的应用程序中使用它，但是当在异步函数外部调用时，该变量总是返回一个空对象。在来自AsyncStorage 的数据完成加载之前，它似乎对变量应用了一个值。

async function getData(){
  try {
    const value = await AsyncStorage.getItem('redditInsights')
      console.log('----------- getStore insights ---------')
      const insights = JSON.parse(value)
      console.log(insights) //  -------------> returns desired data
      return insights

  }
  catch (error) {
    console.log(error)
  }
}

const outsights = getData()
console.log("-------------------- outsights---------------------")
console.log(outsights) // ----------------------> returns empty object

我知道我可以在异步函数中提取数据，但是除了异步函数之外，我不能在任何地方使用该数据。我无法在函数外部调用 async 中声明的变量，除非它在数据被拉取之前尝试将值应用于变量。

理想情况下，我会简单地将数据存储到一个变量中，以便在我想要的任何地方使用，而无需像这样的异步函数，但这需要顶级等待支持：

 const value = await AsyncStorage.getItem('redditInsights')
 const insights = JSON.parse(value)

我尝试在 npm start 处通过众多标志（--harmony-top-level-await、--experimental-repl-await、--experimental-top-level-await）实现顶级等待，如下所示：npm start --flag 无济于事。我还升级到node v14.15.1，它应该支持顶级等待，但我仍然收到错误。

如何在我的 react native 和 expo 环境中实现顶级等待，以便我可以使用 AsyncStorage 中的数据

或者，如果有人知道从AsynStorage 获取我的数据的更好方法，我非常愿意尝试！！

【问题讨论】：

您可以从AsyncStorage 获取数据，并在您需要的每个组件中编写代码，但如果您想在多个组件中使用它，您绝对应该使用上下文或redux 来实现或手动使用支柱钻孔。
您能否详细说明如何使用 redux 或 prop 钻孔来做到这一点？或者提供一些资源？
我认为this 文章足以在您的应用程序中使用上下文。如果你对 redux 没有任何经验，我建议你对上下文有一点熟悉，然后再使用 redux。但是您可以在上下文组件中的useEffect 挂钩中设置您将在整个应用程序中使用的状态值，或者如果您使用基于类的组件，请使用componentDidMount，对于这些您可以查看官方react docs。
好的，谢谢，我会检查它们，如果它们有效，请告诉您。
很抱歉您的资源太不透明，我还无法从 AsyncStorage 中正确提取数据。请提供一个清晰的示例来替换上面提供的代码并解决帖子中提到的问题

标签： react-native async-await expo react-native-android asyncstorage

【解决方案1】：

简单的答案是这是不可能的。

在 react-native here 中有一个关于顶级等待的更详细的答案，它说 React Native 不满足顶级等待的要求（使用节点模块而不是 ECMAScript 原生模块）。

但是您的代码示例有一个错误，您可以声明一个顶级变量 insights 并将异步数据的结果分配给它。您的错误是使用getData 的返回值，您需要使用let 声明一个顶级变量，然后将结果分配给它（因此，而不是return insights）您会在@ 之后执行topScopeInsights = insights 之类的操作987654327@.

但是，这没有任何意义，因为您不知道数据是否已经到达。该应用程序将使用您的变量undefined 启动，然后您需要检查它是否已到达。这就是 promise 的用途。

所以，回到我原来的答案，这是不可能的。 :-(

【讨论】：