ReactJS与Material UI：如何编辑对象并更新对象数组？

嘿，我一眼就看出问题出在哪啦——你编辑后数组只剩修改项，核心原因是handleSubmitEdit里更新data的方式完全错了！

核心错误 #

你写的data: [this.state]这行代码，是把整个组件的state对象当成单个元素塞进了新数组，直接覆盖了原来的data数组，自然就只剩这一项了。正确的做法应该是修改原数组中对应索引的项，而不是替换整个数组。

分步修正方案 #

1. 在state中添加编辑索引字段

我们需要记住当前正在编辑的是哪一条数据，所以给state新增一个editIndex字段：

constructor(props) {
  super(props);
  this.state = {
    data: [],
    open: false,
    openEdit: false,
    openAlert:false,
    priority:'',
    nameTask:'',
    deadline:new Date(),
    editIndex: null // 新增：存储当前编辑项的索引
  };
}

2. 修改handleEdit，保存当前编辑的索引

点击编辑按钮时，除了把数据带到表单，还要把当前项的索引存到state里：

handleEdit = e => {
  // 把index转成数字，避免字符串类型问题
  const index = parseInt(e.currentTarget.getAttribute('index'), 10);
  const foundObject = this.state.data[index];
  this.setState({
    openEdit: true,
    editIndex: index, // 保存编辑项的索引
    nameTask: foundObject.nameTask,
    priority: foundObject.priority,
    deadline: foundObject.deadline
  });
}

3. 修正handleSubmitEdit，正确更新数组

这里要遵循React的不可变更新原则（复制原数组再修改），确保React能检测到state变化并重新渲染：

handleSubmitEdit = (e) => {
  e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新丢失state
  const err = this.validate();
  if (!err) {
    const { data, editIndex, nameTask, priority, deadline } = this.state;
    // 复制原数组，不要直接修改this.state.data
    const newData = [...data];
    // 更新对应索引的项，保留原项的其他属性（如果有的话）
    newData[editIndex] = {
      ...newData[editIndex],
      nameTask,
      priority,
      deadline
    };
    this.setState({
      data: newData, // 用更新后的新数组替换原数组
      openEdit: false,
      nameTask: "",
      nameTaskError: "",
      priority: "Low",
      deadline: new Date(),
      editIndex: null // 清空编辑索引
    });
  }
}

额外改进建议 #

• 不要用DOM属性传递索引：最好在渲染表格行时，直接把index作为参数传给handleEdit，比如onClick={() => this.handleEdit(index)}，这样比getAttribute更安全，也避免了类型转换的麻烦。
• 养成不可变更新的习惯：React依赖state的引用变化触发渲染，永远不要直接修改this.state里的数组或对象，一定要复制后再修改。
• 拆分组件优化代码：可以把编辑弹窗拆成单独的子组件，通过props传递数据和回调，代码会更清晰，也符合React的组件拆分原则。
• 表单验证要完善：确保validate函数能正确检查所有必填字段，比如nameTask是否为空等，给用户明确的错误提示。

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