我正在创建一个应用程序，它通过 AsyncStorage 传递一些重要信息，但现在在另一个屏幕上更新它时出现问题......让我们看看： 在屏幕 1 上：
在 componentDidMount 上从 AsyncStorage 加载数据
componentDidMount() {
AsyncStorage.getItem("userChats").then((value) => {
this.setState({userChats: JSON.parse(value)});
});
}
然后在屏幕 2 上我修改 userChats.....
我希望再次回到屏幕 1 时，屏幕 2 上所做的更改会反映在屏幕 1 上，但不会再次触发 componentDidMount ............
正确的做法是什么？
谢谢
【问题讨论】：
标签： react-native react-lifecycle
componentDidMount 是一种生命周期方法。从 Screen1 导航到 Screen2 不会卸载 Screen1。因此，当您从屏幕 2 回到屏幕 1 时，屏幕 1 不会安装，因为它没有被卸载。因此，componentDidMount 不会被调用。
正确的做法是什么？
您应该使用Context API。当您从 AsyncStorage 加载时，将该值也设置为 Context。更新值时，将更改写入 AsyncStorage 和 Context。
PS：AsyncStorage 可能不需要。这取决于您的要求。很可能，您只能使用Context API 来实现这一点。
请检查以下小吃。它是使用钩子完成的。你可以使用类组件来做同样的事情。
https://snack.expo.io/3L9QSqWqt
更新：
如果要处理的数据太大，不建议使用Context，因为它将所有数据保存在设备RAM中，消耗过多的RAM可能会导致应用崩溃。
在不使用上下文的情况下执行此操作：
(1) 定义一个函数来从AsyncStorage检索数据。
loadData() {
AsyncStorage.getItem("userChats").then((value) => {
this.setState({userChats: JSON.parse(value)});
});
}
(2) 打电话给componentDidMount。
componentDidMount() {
this.loadData()
}
(3) 导航到Screen2时，传递一个回调函数作为prop调用loadData函数。
this.props.navigation.navigate('Screen2', {
onGoBack: () => this.loadData(),
});
(4) 然后在Screen2中，goBack之前，你可以这样做：
await AsyncStorage.setItem('userChats', updatedData);
this.props.navigation.state.params.onGoBack();
this.props.navigation.goBack();
然后，在screen2中调用loadData函数。
PS：由于你使用state来存储从AsyncStorage获取的数据，你也可以直接加载到Context中使用。但是，请记住，使用过多的 RAM 可能会导致应用崩溃。
【讨论】：