AsyncStorage getItem 无法在抽屉内使用反应原生路由器通量答案

【问题标题】：AsyncStorage getItem not working within drawer with react native router fluxAsyncStorage getItem 无法在抽屉内使用反应原生路由器通量
【发布时间】：2019-02-15 10:35:27
【问题描述】：

我正在尝试在我的抽屉组件中获取 AsyncStorage 中的值。我已经完成了条件渲染以在抽屉中显示 login 和 logout 按钮。所以在成功登录后，如果 @987654324 中有值@抽屉内的按钮应该是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 {
....
}

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

在每个列表项的抽屉内，我检查是否设置了name。它只会在name 存在时导航。但问题最初在componentDidMount 内我没有在@ 中获得值987654333@。请帮我找到解决方案。问题只存在于侧边栏中。我在所有其他屏幕中都得到了AsyncStorage 的值。请帮助。任何帮助都非常重要。谢谢。

【问题讨论】：

标签： reactjs react-native react-native-router-flux asyncstorage

【解决方案1】：

问题是您在将用户添加到异步存储之前检查用户。单击某个项目时它起作用的原因是因为每次单击列表项时您都在检查用户。您可以使用componentWillUpdate 而不是componentDidMount。我猜当你点击抽屉时它会更新组件然后检查用户（因为 React 会重新渲染整个 Component 子树）。

希望有帮助

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

【讨论】：

没问题！编码愉快！