React API调用后组件未更新问题求助（附完整代码）

核心问题是你直接修改了普通变量rides的属性，而非通过React状态更新机制触发重渲染。React只会追踪通过useState/useReducer声明的状态变化，普通变量的修改不会触发组件重新渲染，所以Rides组件一直展示初始的$0价格。

具体修改步骤 #

1. 将rides转为React状态 #

在Map组件中，把普通数组变量改成useState声明的状态：

// 替换原来的const rides = [...]
const [rides, setRides] = useState([
  { id: 1, name: 'Sedan', price: 0 },
  { id: 2, name: 'Minivan', price: 0 },
  { id: 3, name: 'Full Size SUV', price: 0 },
]);

2. 修改fetchPrice函数，通过setRides更新状态 #

不要直接修改原数组的属性，而是创建新的数组（保持状态不可变性），再用setRides更新：

const fetchPrice = async () => {
  console.log("Started fetchPrice function");
  const URL = "myServerUrlThatImNotShowingStackoverflow";

  try {
    const response = await fetch(URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        "from": {
          "latitude": pickupLocation?.lat,
          "longitude": pickupLocation?.lng
        },
        "to": {
          "latitude": dropoffLocation?.lat,
          "longitude": dropoffLocation?.lng
        }
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const json = await response.json();
    console.log(json.priceSedan, json.priceMinivan, json.priceFullSizeSuv);
    
    // 创建新数组，更新对应车型的价格
    const updatedRides = [
      { ...rides[0], price: json.priceSedan },
      { ...rides[1], price: json.priceMinivan },
      { ...rides[2], price: json.priceFullSizeSuv }
    ];
    // 更新状态，触发组件重渲染
    setRides(updatedRides);

    return true;

  } catch (error) {
    console.error('Error fetching data:', error);
    return false;
  }
};

3. 验证逻辑 #

当setRides执行后，Map组件的状态更新，会重新传递rides props给Rides组件，Rides组件就会渲染最新的价格数据。

为什么不需要额外的useEffect？ #

你的流程是点击按钮后先获取路线，再获取价格，最后切换到Rides屏幕，这个逻辑是触发式的（由用户点击事件驱动），不需要用useEffect监听状态变化来触发请求。useEffect更多用于响应状态/ props变化时执行副作用，而这里的异步请求是由用户操作直接触发的，保持现有触发逻辑即可。

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