React组件接收Props后多API请求状态未更新问题

我一眼就看出你这里有两个核心问题，还有一个小的命名细节问题，咱们逐个拆解：

1. useEffect依赖数组缺失，导致不会重新触发请求 #

你当前的useEffect依赖是[]，这意味着它只会在Component2首次挂载时执行一次。当你从Component1传递新的vehicles数组过来时，组件虽然接收到了新的props，但因为useEffect没有监听这个依赖，所以不会重新执行API请求，自然还是显示第一次的数据。

2. 异步请求的时序问题 #

fetch是异步操作，你在forEach里发起请求后立刻调用setVehicleState(vehicles)，这时候所有的fetch请求还没完成，vehicles数组还是空的。后续请求返回数据后把内容push进去，但此时state已经不会再更新了。

3. 小的props命名错误 #

看你Component1里传的是vehicles={toDisplay.vehicleID}，但Component2里写的是console.log(props.vehicleID)——这里应该是props.vehicles才对，不然你连正确的ID数组都拿不到（不过你说console显示props正确，可能是笔误？）

修复后的完整代码 #

import React, { useState, useEffect } from 'react';
import fetch from 'node-fetch';

export default function VehicleDetail(props) {
  const [vehicleState, setVehicleState] = useState([]);
  console.log(props.vehicles); // 修正props命名

  useEffect(() => {
    // 用Promise.all处理多个异步请求，确保所有请求完成后再更新state
    const fetchVehicles = async () => {
      const vehiclePromises = props.vehicles.map(vehicleID => 
        fetch(`/api/vehicle/${vehicleID}`)
          .then(res => res.json())
          .then(data => data.data)
      );
      const fetchedVehicles = await Promise.all(vehiclePromises);
      setVehicleState(fetchedVehicles);
    };

    fetchVehicles();
  }, [props.vehicles]); // 把props.vehicles加入依赖数组，props变化时重新执行

  // 这里可以渲染获取到的数据，比如：
  return (
    <div>
      {vehicleState.map((vehicle, index) => (
        <div key={index}>
          <p>车辆ID: {vehicle.id}</p>
          {/* 根据你的API返回数据，添加其他车辆信息渲染 */}
        </div>
      ))}
    </div>
  );
}

关键修复点解释 #

• 添加useEffect依赖：把props.vehicles放进依赖数组，这样每次props里的车辆ID数组变化时，useEffect都会重新执行，发起新的API请求。
• 用Promise.all处理异步请求：map会返回一组Promise，Promise.all会等待所有Promise完成后返回结果数组，这样就能确保所有数据都获取到后再更新state，彻底解决异步时序问题。
• 修正props命名：确保你访问的是正确的props属性，避免因命名错误导致拿不到数据。

这样修改后，每次点击Component1的链接切换不同的车辆ID数组时，Component2都会重新请求对应的数据并更新渲染了。

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