AsyncStorage getItem не работает в ящике с реакцией собственного потока маршрутизатора

Question

Я пытаюсь получить значения в пределах AsyncStorage в своем компоненте ящика. Я сделал условный рендеринг для отображения кнопки login и logout в ящике. Так что после успешного входа в систему, если есть значения в AsynStorage кнопка в ящике должна быть Logout вместо Login. Но изначально после входа в систему, когда ящик открывается, значение AsyncStorage не получается. Оно появляется, только если я нажимаю на определенный элемент в ящике. Так какполучить значения в ящике, когда он открыт? Я сделал следующее

login.js

async saveItem(item, selectedValue) {
    try {
      await AsyncStorage.setItem(item, selectedValue);
    } catch (error) {
      console.error('AsyncStorage error: ' + error.message);
    }
  }

...
....
...
.then((response) => response.json())
      .then((responseData) => {
        this.setState({
          login: responseData
        })
        if (responseData.status == true) {

          this.saveItem('userdetail', responseData.token.access_token);
          this.saveItem('userimage', responseData.user.avatar);
          this.saveItem('user', responseData.user.name);
          Actions.dashBoard();
          this.setState({ isLoading: false });

        } else {
....
}

hook.js

componentDidMount() {
        AsyncStorage.getItem("user").then(value => {
            this.setState({ name: value })
        })
        console.log(this.state.name);
    }

onPressList = (data, index) => {
        AsyncStorage.getItem("user").then(value => {
            this.setState({ name: value })
        })
        if (this.state.name) {
            if (data.route == "profile")
                Actions.profile();
       ...
      ....
      ...
}
}

render(){
return(
{this.state.name? (
 <ListItem
                            button
                            noBorder
                            onPress={() => this.onPressLogout()}
                        >

                            <Text style={[styles.text, { textAlign: 'left' }]}>
                                Logout
                            </Text>

                        </ListItem>
) : (
 <ListItem
                            button
                            noBorder
                            onPress={() => this.onPressLogin()}
                        >
                            <Text style={[styles.text, { textAlign: 'left' }]}>
                                Login
                            </Text>

                        </ListItem>) }
)
}     

Здесь в ящике для каждого списка элементов я проверяю, установлен ли name или нет. Он будет перемещаться, только если есть name. Но проблема изначально в componentDidMountНе получить значения в AsyncStorage. Пожалуйста, помогите мне найти решение. Проблема существует только в боковой панели. Я получаю значения в AsyncStorage на всех других экранах. Пожалуйста, помогите. Любая помощь будет действительно заметной.Спасибо.

Answer 1

Проблема в том, что вы проверяете пользователя до того, как он был добавлен в асинхронное хранилище.Причина, по которой он работает, когда вы нажимаете на элемент, заключается в том, что вы проверяете пользователя каждый раз, когда щелкает элемент списка.Вместо componentDidMount вы можете использовать componentWillUpdate.Я предполагаю, что когда вы щелкнете по ящику, он обновит компонент, а затем проверит пользователя (поскольку React повторно отображает все поддерево компонента).

Надеюсь, это поможет

    componentWillUpdate() {
        AsyncStorage.getItem("user").then(value => {
            this.setState({ name: value })
        })
        console.log(this.state.name);
    }