React异步请求返回数组顺序混乱问题求助

问题根源 #

1. forEach不支持异步顺序执行：你在retrieveShipments里用forEach遍历并调用异步的createRows，但forEach不会等待每个异步操作完成，请求返回顺序完全取决于服务器响应速度，导致最终shipments数组顺序随机。
2. 状态更新依赖外部变量：createRows中判断shipmentId是否存在时，直接使用外部的shipments状态，存在闭包陷阱，可能导致判断逻辑失效。

优化方案（推荐并行请求+统一排序） #

这种方案既能保证请求效率（并行请求），又能严格控制最终数组的排序，同时避免多次状态更新的问题：

1. 修改retrieveShipments函数

const [shipments, setShipments] = useState([]);

async function retrieveShipments(){ 
  const amount = 5;
  await connectToBol();

  let allShipments = await getShipments();
  // 替换原splice操作，用slice更安全（不修改原数组），保留前5条数据
  allShipments = allShipments.slice(0, amount);

  if(allShipments.length > 0){
    // 并行发起所有详情请求
    const shipmentPromises = allShipments.map(shipment => 
      getShipmentDetails(shipment.shipmentId).catch(err => {
        console.log(`获取ID ${shipment.shipmentId} 详情失败:`, err);
        return null; // 失败时返回null，后续过滤
      })
    );
    
    // 等待所有请求完成
    const allDetails = await Promise.all(shipmentPromises);
    
    // 过滤失败的请求结果
    const validDetails = allDetails.filter(detail => detail !== null);
    
    // 去重（基于shipmentId）
    const uniqueDetails = Array.from(
      new Map(validDetails.map(d => [d.shipmentId, d])).values()
    );
    
    // 按shipmentDateTime排序（假设日期是ISO格式字符串，可直接转Date比较）
    const sortedDetails = uniqueDetails.sort((a, b) => 
      new Date(a.shipmentDateTime) - new Date(b.shipmentDateTime)
    );
    
    // 一次性更新状态
    setShipments(sortedDetails);
  }
}

useEffect(() => {
  retrieveShipments()
}, []);

2. 修复getShipmentDetails的错误处理

原代码中catch块没有返回值，会导致请求失败时返回undefined，后续处理容易报错，修改为：

export async function getShipmentDetails(shipmentId){
  try {
    const response = await axios.get(`${baseUrl}/shipments/${shipmentId}`,{
      headers: {
        'Authorization': 'Bearer ' + <token>
      }
    });
    return response.data; 
  } catch (error) {
    console.log('获取运单详情错误: ', error);
    // 抛出错误让上层处理，或返回null
    throw error;
  }
}

备选方案（串行请求保证顺序） #

如果必须严格按照allShipments的原始顺序返回（而非按日期排序），可以用for...of替代forEach，强制串行执行请求：

async function retrieveShipments(){ 
  const amount = 5;
  await connectToBol();

  let allShipments = await getShipments();
  allShipments = allShipments.slice(0, amount);

  if(allShipments.length > 0){
    // 用for...of保证顺序执行
    for (const shipment of allShipments) {
      const details = await getShipmentDetails(shipment.shipmentId);
      if(details){
        // 用函数式更新避免闭包问题
        setShipments(prev => {
          // 在prev数组中判断是否已存在
          if(!prev.some(s => s.shipmentId === details.shipmentId)){
            return [...prev, details];
          }
          return prev;
        });
      }
    }
  }
}

注意：串行请求会增加总耗时，仅在需要严格保持原始请求顺序时使用。

内容的提问来源于stack exchange，提问作者Diêgo Cup