React Hooks创建含多对象数组时遇覆盖问题求助

核心错误原因 #

你之前的更新代码直接破坏了allPlans的数组类型：

• setAllPlans({...allPlans,"quantity": userAmount})把原本的数组状态改成了对象，后续操作时allPlans不再是数组，导致添加新元素时逻辑完全错误。
• 添加新对象的代码[{...allPlans, price:'xxx', quantity: 1}]错误地将数组（或已变成的对象）展开到新对象中，再包裹成数组，这不是追加数组元素的正确方式。

正确操作代码 #

1. 向数组中添加新对象

保持allPlans始终为数组，通过展开原数组元素+追加新对象的方式添加：

// 正确添加新对象
setAllPlans([...allPlans, { price: 'price_1M73OzIRkO4545twr45kAHa', quantity: 2 }]);

2. 更新已有对象的quantity

通过遍历数组，找到对应price的对象并修改其quantity，同时保留其他元素：

// 更新指定price的quantity
const updatePlanQuantity = (targetPrice, userAmount) => {
  setAllPlans(prevPlans => 
    prevPlans.map(plan => 
      plan.price === targetPrice 
        ? { ...plan, quantity: userAmount } 
        : plan
    )
  );
};

注：使用函数式更新（prevPlans）可以确保获取到最新的状态值，避免状态更新滞后问题。

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