React Native - 为异步存储值更改添加监听器答案

【问题标题】：React Native - Add a listener to Async Storage value changeReact Native - 为异步存储值更改添加监听器
【发布时间】：2023-03-14 10:13:01
【问题描述】：

您好，我在 LoginPage 上设置了 AsyncStorage.getItem('authStatus') 的值，但问题是 Navigator 类不响应 AsyncStorage 的值更改。如何将监听器添加到 AsyncStorage.getItem('authStatus')？

    export default class Navigator extends React.Component {
      constructor(props) {
        super(props);
        this.state = { authStatus: ''}
      }
    
    
      async componentDidMount() {
        var authStatus = await AsyncStorage.getItem('authStatus');
       **DOESN'T WORK ->** authStatus.addListener(authStatus => {
          this.setState(this.state.authStatus = authStatus)
        });
        console.log("authStatus =")
        console.log(this.state.authStatus)
        SplashScreen.hide()
      }

 render() {
    return (
      (this.state.authStatus == 'authenticated')
        ?
        this.Home()
        :
        this.AuthStackScreen()
    );
  }

【问题讨论】：

登录屏幕是身份验证堆栈的一部分吗？堆栈导航器？

标签： javascript reactjs react-native listener

【解决方案1】：

我不知道您是否以正确的方式使用 AsyncStorage...试试这样的方法：

您可以使用 AsyncStorage 像这样存储和检索您的数据：

  const storeData = async (key, value) => {
    try {
      await AsyncStorage.setItem(key, value); 
    } catch (error) {
      console.log(error);
    }
  };

  const getData = async key => {
    try {
      const data = await AsyncStorage.getItem(key);
      if (data !== null) {
        console.log(data);
        return data;
      }
    } catch (error) {
      console.log(error);
    }
  };

然后使用键名调用 getData，就像您将值存储在任何您想要的位置一样，并将键设置为状态值。

存储值：

storeData("authStatus", the value);

获取值：

  await getData("authStatus") 
    .then((data) => data)
    .then((value) => this.setState({ authStatus: value }))
    .catch((err) => console.log("AsyncStorageErr: " + err));

【讨论】：

【解决方案2】：

异步存储是适用于您的 React Native 应用程序的异步、未加密、持久、键值存储解决方案。它不提供任何事件。它返回一个承诺。

参考： https://react-native-community.github.io/async-storage/docs/usage

在您的代码中，“authStatus”可能包含也可能不包含值。

try {
    const authStatus = await AsyncStorage.getItem('')
    if(value !== null) {
      // value previously stored
    this.setState({authStatus})
}

【讨论】：