React Native — добавление прослушивателя для изменения значения асинхронного хранилища

#javascript #reactjs #react-native #listener

#javascript #reactjs #react-native #прослушиватель

Вопрос:

Здравствуйте, я установил значение 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()
    );
  }
  

Комментарии:

1. Является ли экран входа в систему частью стека аутентификации? Навигатор стека?

Ответ №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})
}