如何向React的state中fields数组追加对象？当前代码覆盖原有数据

你的问题出在setState的写法上——你直接把fields替换成了一个仅包含两个重复元素的新数组（复制的最后一个元素和newFields，而newFields本身就是复制的最后一个元素），完全丢弃了原数组里的其他元素，自然无法实现“追加”效果。另外，直接使用this.state更新状态存在风险，因为React的setState是异步操作，可能拿到旧的state值。

修复方案 #

要实现追加，你需要展开原有的fields数组，再把新复制的元素添加到末尾，同时用函数式的setState确保获取到最新的state。

修改后的代码：

addField() {
  this.setState(prevState => {
    // 处理空数组的边界情况，防止数组长度为0时index为-1报错
    if (prevState.fields.length === 0) {
      // 如果原数组为空，可根据需求返回初始值，这里直接返回原数组
      return { fields: prevState.fields };
    }
    
    // 获取最后一组字段
    const lastFieldGroup = prevState.fields[prevState.fields.length - 1];
    // 浅拷贝最后一组字段（如果字段里的对象是引用类型，需要深拷贝则用JSON.parse(JSON.stringify(lastFieldGroup))）
    const newFieldGroup = [...lastFieldGroup];
    
    // 展开原fields数组，追加新的字段组
    return {
      fields: [...prevState.fields, newFieldGroup]
    };
  }, () => {
    console.log("updated state", this.state);
  });
}

关键说明 #

• 使用prevState参数：这是React推荐的依赖前一次state更新的写法，能避免异步更新导致的state不一致问题。
• [...prevState.fields, newFieldGroup]：展开原数组的所有元素，再把新复制的字段组放在末尾，实现真正的“追加”。
• 深拷贝的必要性：如果IFieldDefinition是包含嵌套对象的引用类型，浅拷贝（[...]）只会复制数组的引用，后续修改新字段组里的对象会影响原数组中的对应元素。这种情况下，需要用深拷贝，比如JSON.parse(JSON.stringify(lastFieldGroup))。

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