React中异步函数内有汇率数据，外部数组却为空的问题求助

你的核心问题是在React函数组件里用普通变量存储异步获取的数据，既没触发组件重渲染，变量还会在组件每次渲染时被重新初始化，导致外部无法正确获取更新后的数据。

具体问题分析 #

1. const currenciesValues: any[] = []; 是普通变量，组件每次重新渲染时都会重置为空数组；异步操作完成后修改它不会触发组件更新，所以外部的console.log拿到的始终是渲染时的空数组。
2. 你看到控制台有时看似显示数组有数据，是因为浏览器控制台会保留对象的引用，后续数组被修改后展开控制台会显示最新状态，但JSON.stringify是在组件渲染时执行的，此时数组还没被更新，所以显示为空。

修改步骤 #

1. 用React的useState钩子存储汇率数据，状态更新会自动触发组件重渲染。
2. 在异步函数中直接用setState更新数据，不需要用push。

修改后的完整代码 #

import { useState, useEffect } from 'react';

const defaultData = [
  { value: 1 }, { value: 5 }, { value: 10 },
  { value: 25 }, { value: 50 }, { value: 100 },
  { value: 500 }, { value: 1000 }, { value: 5000 },
  { value: 10000 }, { value: 50000 }
];

function CurrencyTable({ choiceFrom, choiceTo, labelFrom, labelTo }: IProps) {
  // 用useState初始化状态，替代普通数组
  const [currenciesValues, setCurrenciesValues] = useState<any[]>([]);

  useEffect(() => {
    getCurrenciesValues();
  }, [choiceFrom, choiceTo]);

  async function getCurrenciesValues() {
    // Promise.all返回所有请求结果组成的数组，直接赋值给状态
    const results = await Promise.all(
      defaultData.map(async (number) => {
        const { result } = await fetchFromAPI(`convert?from=${choiceFrom}&to=${choiceTo}&amount=${number.value}`);
        return result;
      })
    );
    // 更新状态，触发组件重渲染
    setCurrenciesValues(results);
    console.log("Inside currenciesValues", currenciesValues);
  }

  // 组件重渲染时，这里会打印最新的状态数据
  console.log("Outside currenciesValues", currenciesValues);

  // 后续渲染UI时直接使用currenciesValues即可
  return (
    // 你的表格渲染逻辑
  );
}

额外说明 #

• Promise.all返回的是所有异步操作结果的数组，不需要再用push，直接把这个数组传给setCurrenciesValues就行。
• 组件渲染时的console.log会执行多次：第一次初始化时是空数组，异步请求完成后状态更新，组件重新渲染，此时会打印最新的汇率数据。
• 如果你需要处理加载状态，可以再加一个isLoading的状态，在请求开始时设为true，请求完成后设为false，避免UI显示异常。

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