页面加载时服务器数据未加载，疑Async Storage token获取延迟问题

问题根源 #

• 初始化阶段tokenParse和LoadData并行执行，LoadData可能在AsyncStorage返回token前就发起请求，导致请求参数中token为空
• LoadData内部嵌套LoadTasks函数属于冗余写法，易引发异步时序混乱
• setObject(Object.values(message))使用的是当前渲染周期的message旧值，无法正确更新为刚获取的新数据
• parsedValue未声明为局部变量，属于全局变量，存在潜在冲突风险

修正后的代码 #

const tokenParse = async () => {
  const token = await AsyncStorage.getItem('@storage_token');
  setvalue(JSON.parse(token));
};

const LoadData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_token');
    if (value !== null) {
      const parsedValue = JSON.parse(value);
      const tokenConfig = {
        headers: {
          'Content-Type': 'application/json',
        },
        params: {
          token: parsedValue,
        }
      };
      const response = await axios.get(`${baseUrl}/api/get`, tokenConfig);
      const newTasks = response.data.response.tasks;
      setmessage(newTasks);
      setObject(Object.values(newTasks));
    }
  } catch (error) {
    console.log('Ошибка при получении значения из AsyncStorage', error);
  }
};

useEffect(() => {
  const init = async () => {
    await tokenParse();
    await LoadData();
  };
  init();
}, []);

return (
  <>
    {object?.map((item, index) => (
      <Text 
        key={item.someProperty} 
        style={{color: 'black', marginTop: 5, marginLeft: '2%'}}
      >
        {item.task_name}
      </Text>
    ))}
  </>
);

关键修正说明 #

1. 统一异步时序：在useEffect中用一个异步函数包裹，确保先完成tokenParse再执行LoadData，避免并行执行导致的token未就绪问题
2. 简化异步逻辑：去掉嵌套的LoadTasks函数，直接在LoadData中发起请求，提升代码可读性和时序稳定性
3. 使用新数据更新状态：获取到响应后直接用新的newTasks更新object状态，避免依赖旧的message值
4. 修复变量声明：给parsedValue添加const声明，避免全局变量污染

内容的提问来源于stack exchange，提问作者Artur Fik