如何在map方法外部获取push后的数组数据？

云上老周

2026-8-17

问题原因与解决方案

为什么外部拿不到更新后的`arr`？

组件挂载时，外部的console.log(arr)会先于useEffect里的异步请求执行，此时请求还没发起，arr自然是空的。
你用的是普通变量arr，就算后续异步请求完成并push了数据，React不会因为普通变量变化重新渲染组件，所以外部的console.log不会再次执行，也就看不到更新后的值。
另外，x?.map里的异步函数会返回Promise，但你没等待所有请求完成，可能部分数据还没push就去用arr了。

正确的解决办法

用React的useState管理数组状态，再用Promise.all等待所有异步请求完成，保证数据全部加载后再更新状态：

import { useState, useEffect } from 'react';

// ...

const [arr, setArr] = useState([]);

useEffect(() => {
  // 把所有异步请求包装成Promise数组
  const fetchPromises = x?.map(async (id) => {
    try {
      const response = await fetch(`https://www.roads.com/roads/api/web/bk/${id}`);
      const data = await response.json();
      // 返回当前请求得到的经纬度，不要直接push到数组
      return [data?.data?.latitude, data?.data?.longitude];
    } catch (error) {
      console.log(error);
      return []; // 出错时返回空数组，不影响后续合并
    }
  }) || [];

  // 等待所有请求完成，合并结果
  Promise.all(fetchPromises).then((results) => {
    // 把二维数组扁平化，得到最终的经纬度数组
    const mergedArr = results.flat();
    setArr(mergedArr);
    // 这里可以拿到完整的数组
    console.log(mergedArr);
  });
}, [x])

// 组件渲染时会根据arr的最新值更新，这里的console.log会在每次arr变化时执行
console.log(arr);