reactjs - 在整个应用程序加载之前从 AsyncStorage 获取价值的最佳方法是什么

Question

我有App.js文件，它是我的应用程序的根目录（ios 和 android 都引用它）。在调用渲染方法之前，我需要
保留一个值。 问题是它已经很晚了，我无法得到那个值。AsyncStorageapp.js
async

class App extends React.Component {
  constructor(props) {
    super(props);
    this.init()
  }
  async init() {
     try {
  const value = await AsyncStorage.getItem('@myPoorValue:key');
  if (value !== null){
    ...
  }
} catch (error) {}
  }
}
...
render (...

我希望我能很好地解释我的问题是什么。
我知道没有办法让它同步（我想要），但不知道在这种情况下该怎么做。
为了更好地解释它，我使用I18n并手动设置I18n.locale为某个值，其他组件在手动设置之前获得默认值。
请注意，我也使用 redux 并将选定的值传递给它。

Answer 1

尝试以下操作：

...

constructor(props) {
  super(props)
  
  this state = {
    isLoading: true
  }
}
  
async componentDidMount() {
  await this.init()
  
  // you might want to do the I18N setup here
  this.setState({ 
    isLoading: false
  })
}

async init() {
    const value = await AsyncStorage.getItem('@myPoorValue:key')
    ...
}

...

事情是init()返回一个承诺，你需要等到它得到解决。这时候await就来救命了。

您还需要设置一些加载器，该加载器将在第一次渲染时出现，并在获取 AsyncStorage 值后切换状态以将其替换为实际标记。我已将其放入代码中，但您可能希望触发 redux 操作，具体取决于您的设置。