如何在AsyncStorage调用中用setTimeout获取最新selectedList数据

你的核心问题是存储操作的异步时序与useEffect触发时机不匹配：当activemanagegroup变化时，两个useEffect会同时启动。第一个useEffect里的异步存储还没完成（尤其是selectedList的存储在managementGroup之后），第二个useEffect就已经开始读取本地存储，导致拿到旧的selectedList值。

另外先纠正一个潜在问题：React的useEffect回调不能直接是async函数（因为async函数返回Promise，而useEffect期望返回清理函数或undefined），第一个useEffect的写法需要调整，后面会给出修正后的代码。

推荐解决方案一：直接在点击回调中完成存储+状态更新（最优） #

既然数据是在用户点击按钮时触发存储的，完全可以在点击回调里完成存储后，直接用当前的activemanagegroup和list更新状态，不需要再从AsyncStorage读取，彻底避免异步时序问题：

// 假设你的按钮点击函数是这样的
const handleButtonClick = async () => {
  // 这里应该已经完成了activemanagegroup和list的状态更新逻辑
  try {
    // 存储managementGroup（如果不为空）
    if (activemanagegroup !== null) {
      const groupValue = JSON.stringify(activemanagegroup)
      await AsyncStorage.setItem('managementGroup', groupValue)
    }
    // 存储selectedList
    const listValue = JSON.stringify(list)
    await AsyncStorage.setItem('selectedList', listValue)
    
    // 存完直接更新状态，无需读取本地存储
    setActiveManagementGroup(activemanagegroup)
    setNewList(list)
  } catch (e) {
    console.log('Failed to save data')
  }
}

然后删除原来的两个useEffect即可。这种方式不仅解决了时序问题，还减少了不必要的本地存储读取操作，性能更优。

解决方案二：保留读取逻辑，通过状态标记触发读取 #

如果必须保留从AsyncStorage读取状态的逻辑，可以添加一个状态标记，在存储完成后触发读取操作：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 添加一个状态标记，用于触发读取操作
const [shouldFetchData, setShouldFetchData] = useState(false);

// 修正后的存储useEffect（不再用async作为回调）
useEffect(() => {
  const saveData = async () => {
    try {
      if (activemanagegroup !== null) {
        const groupValue = JSON.stringify(activemanagegroup)
        await AsyncStorage.setItem('managementGroup', groupValue)
      }
      const listValue = JSON.stringify(list)
      await AsyncStorage.setItem('selectedList', listValue)
      
      // 存储完成后，切换标记触发读取
      setShouldFetchData(prev => !prev);
    } catch (e) {
      console.log('Failed to save data')
    }
  };
  saveData();
}, [activemanagegroup, list]);

// 读取useEffect依赖标记，确保存储完成后才读取
useEffect(() => {
  const getData = async () => {
    try {
      const managementGroupValue = await AsyncStorage.getItem('managementGroup')
      const managedUsersList = await AsyncStorage.getItem('selectedList')
      
      const activeManagementGroupSelected = managementGroupValue != null ? JSON.parse(managementGroupValue) : null
      const activeList = managedUsersList != null ? JSON.parse(managedUsersList) : null
      
      setActiveManagementGroup(activeManagementGroupSelected)
      setNewList(activeList)
    } catch (error) {
      console.log('error getting data', error)
    }
  };
  getData();
}, [shouldFetchData]);

这种方式通过shouldFetchData状态的变化，确保只有在所有存储操作完成后，才会执行读取逻辑，保证拿到最新的selectedList值。

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