如何从Promise结果生成数组？React异步获取指标数据异常求解

问题根因 #

1. 异步时序错误：你代码中的setMetrics(newMetrics)是同步执行的，执行时所有Client.getData异步请求尚未返回结果，此时newMetrics是空数组，state直接被赋值为空。
2. 后续异步请求完成后往newMetrics中push元素，仅修改了数组内容、没有变更数组引用，React不会触发state重渲染，因此metrics状态始终停留在初始空数组状态。
3. 控制台显示数组有元素是浏览器控制台的特性：打印数组时保存的是引用，你手动展开数组时才会读取最新的内存值，不代表React state已经更新。

修复代码 #

useEffect(() => {
  const fetchAllMetrics = async () => {
    try {
      // 收集所有条目对应的指标请求
      const itemMetricPromises = currentItems.map(async (item) => {
        // 拉取单个条目对应的指标id列表
        const metricIds = await Client.getData(`items/listmetrics/${item.id}`);
        // 拉取该条目下所有指标的详情
        const metricList = await Promise.all(
          metricIds.map((metricId: string) => Client.getData(`metrics/${metricId}`))
        );
        // 格式化指标结构
        return metricList.map((metric: MetricModel) => ({
          id: metric.id,
          metricName: metric.name
        }));
      });
      // 等待所有条目请求完成，扁平化结果数组
      const allMetrics = (await Promise.all(itemMetricPromises)).flat();
      // 一次性更新state
      setMetrics(allMetrics);
    } catch (err) {
      // 可自行添加错误处理逻辑
      console.error('拉取指标失败', err);
    }
  };

  fetchAllMetrics();
}, [currentItems]);

核心修改点 #

• 将所有异步请求统一用Promise收集，等待全部请求完成后再一次性更新state，避免时序混乱
• 直接生成新数组传给setMetrics，触发React的状态重渲染，确保你访问metrics时拿到的是完整的结果
• 移除了原代码中异步请求外的同步setMetrics调用，保证state仅在所有数据准备完成后更新

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