如何从本地JSON选择对象并传入React状态数组？

看起来你遇到的问题是因为代码里错误地把整个车辆数组赋值给了已购列表，同时对数组类型的carsPurchase做了对象式的操作，导致选中时传入的是完整JSON而非单个车辆对象。下面是具体的问题根源和修复后的代码：

问题根源 #

1. 错误传递整个数组：你在updatedPurchase[id] = oldCars;这行代码里，把完整的cars数组（oldCars）赋值给了已购列表的对应id位置，而不是从数组中取出单个选中的车辆对象。
2. 数组与对象操作混淆：state里的carsPurchase定义为数组，但你却用对象的键值对方式（updatedPurchase[id]）来添加元素，这和初始数据结构不匹配，也不符合数组的操作逻辑。

修复后的代码 #

addingCarHandler = id => {
  // 从cars数组中找到对应id的单个车辆对象
  // 如果你的id是数组索引，就改成 const selectedCar = this.state.cars[id];
  const selectedCar = this.state.cars.find(car => car.id === id);

  // 防止找不到对应车辆的情况，提前退出
  if (!selectedCar) return;

  // 按照不可变原则，创建新的已购车辆数组，添加选中的对象
  const updatedCarsPurchase = [...this.state.carsPurchase, selectedCar];

  // 计算新的总价
  const priceAddition = CAR_PRICES[id];
  const newTotal = this.state.total + priceAddition;

  // 更新已购数量
  const newPurchasedCount = this.state.purchased + 1;

  // 更新state
  this.setState({
    total: newTotal,
    carsPurchase: updatedCarsPurchase,
    purchased: newPurchasedCount
  });
};

关键改动说明 #

• 精准获取单个车辆：用find方法（或数组索引）从cars数组中定位选中的车辆，确保传入carsPurchase的是单个对象而非整个数组。
• 正确更新数组：使用ES6展开运算符[...原数组, 新元素]创建新数组，遵循React的状态不可变更新原则，避免直接修改原数组。
• 增加边界校验：添加if (!selectedCar) return，防止因找不到对应车辆而引发后续逻辑错误。
• 代码结构简化：把每个更新逻辑拆分成独立步骤，让代码更易读和维护。

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