异步getItem在抽屉中无法使用React Native路由器通量工作

Question

我正在尝试在抽屉组件中的 AsyncStorage中获取值。我完成了用于在抽屉中显示 login和 logout按钮的条件渲染。 AsynStorage抽屉内的按钮应为 Logout，而不是 Login。打开时？我已经完成了以下

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 {
....
}

drawer.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>) }
)
}     

在此处，每个ListItem都在此处检查name是否设置了CC_8。它仅在name存在时才导航。但是问题最初是在componentDidMount中，我在AsyncStorage中没有获得值。请帮助我找到我找到的值。一个解决方案。问题仅存在于侧栏中。我在所有其他屏幕中都在AsyncStorage中获取值。请帮助。任何帮助都会非常明显。谢谢

Answer 1

问题在于，您要在将用户添加到异步存储中之前检查用户。单击项目时它可以工作的原因是，每当单击列表项目时，您都在检查用户。而不是componentDidMount，您可以使用componentWillUpdate。我猜想，当您单击抽屉时，它将更新组件，然后检查用户（因为React重新呈现了整个组件子树）。

希望有帮助

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