AsyncStorage存储数据可alert但无法在其他页面Text组件渲染如何解决

问题原因 #

React Native 采用响应式渲染逻辑，只有组件自身的 state 或接收的 props 发生变更时，才会触发组件重新渲染。你在其他页面（如首页）的 displayData 方法仅把读取到的 UserEmail 做了alert弹出，没有将值存入当前页面的 state 中，绑定了state的Text组件自然不会更新显示。

解决方案 #

按以下步骤修改首页代码即可：

1. 首先在首页的构造函数中初始化存储邮箱的state

constructor(props) {
  super(props);
  this.state = {
    UserEmail: ''
  }
}

2. 修改displayData方法，读取到值后更新当前页面的state

displayData = async ()=> {
  try{  
    let user = await AsyncStorage.getItem('UserEmail');  
    alert(user);
    // 新增更新state逻辑，触发组件重渲染
    if(user !== null) {
      this.setState({ UserEmail: user })
    }
  }catch(error){
    alert(error)  
  }  
}

3. 如果需要页面加载时自动显示邮箱，不需要手动点击触发，可以在生命周期中调用读取方法

componentDidMount() {
  // 页面挂载完成后自动读取存储的用户邮箱
  this.displayData()
}

4. 在render方法中绑定当前页面的state到Text组件

render() {
  return (  
    <View>
      {/* 绑定当前页面的UserEmail state */}
      <Text style={styles.FormText}>{this.state.UserEmail}</Text>
      <TouchableOpacity onPress={this.displayData}>  
        <Text>点击刷新数据</Text>  
      </TouchableOpacity> 
    </View>
  );
}

补充说明 #

每个页面的state是完全独立的，存储页的state不会同步到其他页面，所以每个需要用到用户信息的页面都需要单独从AsyncStorage读取后存入当前页面state。如果多页面都要用到公共状态，建议使用Context API、Redux等全局状态管理方案统一维护，避免重复读取存储。

内容的提问来源于stack exchange，提问作者moniem Heraki