ReactJs中如何动态向数组状态添加对象并实现更新？

问题原因 #

你的productData是对象类型，而非数组。之前的代码错误地用数组展开语法[...current]处理对象，导致状态结构被破坏，自然无法正确添加元素到sizes数组中。

1. 向sizes数组添加新对象 #

正确做法是复制原对象结构，仅更新其中的sizes数组：

const addObjectToArray = obj => {
  SetProductData(current => ({
    ...current, // 保留原对象的其他属性（如果存在）
    sizes: [...current.sizes, obj] // 复制原sizes数组并追加新对象
  }));
};

// 调用示例
addObjectToArray({id: 3, value: 'XXX Large', isActive: true});

2. 动态更新数组中的对象 #

如果需要修改数组中某个元素的属性（比如isActive、value），可以通过map方法遍历数组，匹配目标元素后更新：

示例：更新指定id元素的isActive状态

const updateSizeActiveStatus = (targetId, newStatus) => {
  SetProductData(current => ({
    ...current,
    sizes: current.sizes.map(size => 
      size.id === targetId ? {...size, isActive: newStatus} : size
    )
  }));
};

// 调用：把id为3的元素设为未激活
updateSizeActiveStatus(3, false);

示例：修改指定id元素的value值

const updateSizeValue = (targetId, newValue) => {
  SetProductData(current => ({
    ...current,
    sizes: current.sizes.map(size => 
      size.id === targetId ? {...size, value: newValue} : size
    )
  }));
};

// 调用：把id为2的"Small"改为"S"
updateSizeValue(2, "S");

注意：你原state中所有sizes元素的id都是2，这会导致更新时无法区分元素，建议给每个元素设置唯一id。

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