React Hooks中对象数组不可迭代问题求助

你的问题出在调整数量的那段代码——它把原本的数组状态改成了对象，导致后续添加新对象时，prevPlans已经不是数组，自然无法用数组扩展运算符[...prevPlans]进行迭代。

错误原因分析 #

初始状态allPlans是数组[]，但这段调整数量的代码返回的是一个对象：

setAllPlans(prevState => ({
    ...prevState,
    "quantity": userAmount
}));      

当你用{...prevState}展开数组时，会把数组的索引转为对象的键（比如原数组[{price: 'xxx'}]会被展开成{0: {price: 'xxx'}}），再加上quantity属性，最终allPlans就从数组变成了类似{0: {...}, quantity: xxx}的对象。后续执行[...prevPlans]时，对象无法被迭代，因此抛出“数组不可迭代”错误。

修正方案 #

1. 修复数量调整的代码

要修改数组中对象的quantity，需要遍历数组找到目标对象，修改后返回新数组，而不是把整个数组改成对象。比如假设你要修改数组中某个特定价格的对象数量：

setAllPlans(prevState => 
  prevState.map(plan => {
    // 替换为实际的判断条件，比如匹配目标price
    if (plan.price === '要修改的价格ID') {
      return {...plan, quantity: userAmount};
    }
    return plan;
  })
);

如果是修改数组中唯一的对象，也可以直接通过索引定位：

setAllPlans(prevState => {
  if (prevState.length === 0) return prevState;
  const updatedPlans = [...prevState];
  updatedPlans[0] = {...updatedPlans[0], quantity: userAmount};
  return updatedPlans;
});

2. 保留原添加新对象的代码

只要allPlans恢复为数组类型，你原本的添加代码就能正常工作：

setAllPlans(prevPlans => [...prevPlans, {price: 'price_1553OzIDkO5GB1Bj2W46fkAHc', quantity: 1}])

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