求助：AsyncStorage首次进入页面无法获取存储数据

问题根源 #

• 你把获取到的数据存在全局变量OccupancyType里，React组件不会监听全局变量变化，就算异步拿到数据，组件也不会重新渲染展示最新值。
• 在render方法里调用异步的displayData，render是纯函数，不该在这里做副作用操作，而且异步操作完成时当前渲染已经结束，不会触发重新渲染。

解决方案 #

把数据存在组件的state里，在合适的生命周期中获取数据并更新state，触发组件重新渲染：

修改后的获取数据代码

export default class MonthlyAnalysis extends React.Component {   
  // 用state存储数据，替代全局变量
  state = {
    OccupancyType: ''
  }

  displayData = async () => {  
    try {  
      const data = await AsyncStorage.getItem('selectedOccupType');
      // 更新state，触发组件重新渲染
      this.setState({ OccupancyType: data });
    } catch(error) {  
      alert(error)  
    }  
  } 

  // 组件挂载后执行数据获取，只执行一次
  componentDidMount() {
    this.displayData();
  }

  render() {
    // 从state中取数据使用
    const { OccupancyType } = this.state;
    return (
      // 这里写你的页面渲染内容，比如展示数据
      <Text>{OccupancyType}</Text>
    );
  }
}

存储数据时的注意事项

如果是存储后直接跳转到页面3，要确保存储操作完成后再跳转，避免页面跳转时存储还没结束：

// 先等待存储完成
await AsyncStorage.setItem('selectedOccupType', selectedOccupType.toString());
// 再导航到页面3
this.props.navigation.navigate('MonthlyAnalysis');

为什么这样改 #

• 用state存数据，React会自动监听state变化，调用setState后组件会重新渲染，就能展示最新的获取结果。
• componentDidMount是类组件中执行初始化异步操作的正确时机，组件挂载后只会执行一次，不会重复触发。
• 确保存储完成后再跳转，避免页面3先挂载但存储还没完成，导致首次获取不到数据。

内容的提问来源于stack exchange，提问作者Vix Hunk