Question

已经看过其他解决方案，但是对于我来说，这些解决方案似乎并不是很好。

我有一个Utilities.js文件：

const setItem = async (value) => {
  if (!value) return;
  AsyncStorage.setItem('@my_key', value);
};

const getItem = async () => {
  var val = await AsyncStorage.getItem('@my_key');
  return val;
};

所有用户的输入都通过Screen1上的代码保存在AsyncStorage中：

Utilities.setItem('value')

一旦保存了数据，我们可以转到Screen2通过ComponentDidMount方法中的getItem（）方法读取AsyncStorage：

  componentDidMount = async () => {
    let asyncValue = await Utilities.getItem();
    let objFromAsyncValue = JSON.parse(asyncValue);
    this.setState({
      storage: objFromAsyncValue
    })
  }

如果我第一次打开Screen2，一切都会很好-正在显示所有已保存的数据，但是在Screen2上不会更新并添加AsyncStorage obj的其他值-但asyncstorage已添加了更多项目。

到目前为止，已经尝试了触发方法：

this.forceUpdate()

，并检查是否在加载时触发了onDidFocus事件：

<NavigationEvents onDidFocus={ alert('Scren refreshed')} />

我知道组件渲染是基于状态的，但是在我的实例中，我没有要更新的状态，只有AsyncStorage无状态对象。

如何刷新屏幕和/或仅读取AsyncStorage对象的更新内容？

Answer 1

在您的情况下，我将使用一个上下文，其中您的提供者是用户键入并保存到异步存储的内容，使用者将是屏幕2。这样，您只需要访问屏幕1上的异步存储即可。屏幕2将始终保持最新状态，直到输入和保存在屏幕1上为止。

请参阅：https://reactjs.org/docs/context.html

Answer 2

我认为您假设Screen2在每次对焦时都可以安装。这不一定是正确的。您应该做的是将getItem调用移到另一个方法中，并调用它onWillFocus。

喜欢这个

onFocus = async () => {
    let asyncValue = await Utilities.getItem();
    let objFromAsyncValue = JSON.parse(asyncValue);
    this.setState({
      storage: objFromAsyncValue
    })
}

然后

<NavigationEvents onDidFocus={ alert('Scren refreshed')} onWillFocus={this.onFocus}/>

React Native-加载时AsyncStorage屏幕更新内容

2 个答案: