React Native中无法在.then异步函数外部更新变量问题求助

问题场景 #

在React函数组件中，需要从AsyncStorage获取听力会话进度，展示进度数值/总行数格式的内容。目前总行数获取逻辑正常，但在GridList的renderItem方法中，异步更新外部声明的progress变量后，return的JSX无法拿到更新后的值，始终显示初始的null。

核心原因 #

JavaScript异步执行特性导致：checkProgressListening是异步函数，.then回调内的代码会在当前渲染周期结束后才执行，而renderItemModule会先返回JSX结构，此时progress还是初始的null。后续变量更新不会触发组件重新渲染，所以页面始终显示旧值。

解决方案 #

方案1：拆分为独立子组件，用状态管理异步数据 #

将每个列表项拆成独立的函数组件，通过useState保存进度，useEffect触发异步数据获取，状态更新后自动重新渲染组件。

// 优化原AsyncStorage查询函数（JSON.parse是同步操作，无需await）
const checkProgressListening = async (name) => {
  const response = await AsyncStorage.getItem(name + '-LISTENING_SESSION');
  return response ? JSON.parse(response) : null;
};

// 独立子组件
const ModuleItem = ({ item, totalnumberoflines }) => {
  const [progress, setProgress] = useState(0); // 默认进度设为0

  useEffect(() => {
    const fetchProgress = async () => {
      try {
        const data = await checkProgressListening(item.englishName);
        if (data) {
          setProgress(data.number);
        }
      } catch (error) {
        console.log(error);
      }
    };

    fetchProgress();
  }, [item.englishName]); // 监听item名称变化，重新获取进度

  return (
    <Text>{progress}/{totalnumberoflines}</Text>
  );
};

// 修改原renderItem方法
const renderItemModule = ({ item, index }) => {
  return <ModuleItem item={item} totalnumberoflines={totalnumberoflines} />;
};

方案2：父组件提前加载所有进度数据 #

在父组件中提前通过Promise.all批量获取所有列表项的进度，合并到数据源中，渲染时直接使用已加载好的进度值，避免在渲染阶段处理异步。

// 假设父组件中dataItems由useState管理
const [dataItems, setDataItems] = useState([]);

// 批量加载进度数据
useEffect(() => {
  const loadAllProgress = async () => {
    if (!dataItems.length) return;

    const updatedItems = await Promise.all(dataItems.map(async (item) => {
      try {
        const progressData = await checkProgressListening(item.englishName);
        return {
          ...item,
          progress: progressData?.number ?? 0
        };
      } catch (error) {
        console.log(error);
        return { ...item, progress: 0 };
      }
    }));

    setDataItems(updatedItems);
  };

  loadAllProgress();
}, [dataItems]);

// 直接在renderItem中使用已加载的进度
const renderItemModule = ({ item, index }) => {
  return (
    <Text>{item.progress}/{totalnumberoflines}</Text>
  );
};

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