React中如何在handleChange事件中更新对象状态？分场景更新需求求助

一、更新schemaName与tableName字段的函数 #

这个函数负责单独修改状态中的schemaName和tableName，同时保留原状态的其他字段（比如columnList）：

const updateTableInfo = (newSchemaName, newTableName) => {
  setTableModel(prevModel => ({
    ...prevModel,
    schemaName: newSchemaName,
    tableName: newTableName
  }));
};

说明：使用函数式更新（传入接收前一状态的回调），能确保基于最新的状态快照进行修改，避免异步更新导致的状态不一致问题。通过展开运算符...prevModel保留原有字段，仅覆盖需要更新的目标字段。

二、更新columnList字段的函数 #

针对columnList的更新，分几种常见场景实现：

1. 替换整个columnList #

直接传入新的列列表，覆盖原有的columnList：

const updateColumnList = (newColumnList) => {
  setTableModel(prevModel => ({
    ...prevModel,
    columnList: newColumnList
  }));
};

2. 更新指定列（按index匹配） #

如果需要修改columnList中的某一列，可通过列的index字段匹配并更新：

const updateSingleColumn = (updatedColumn) => {
  setTableModel(prevModel => ({
    ...prevModel,
    columnList: prevModel.columnList.map(col => 
      col.index === updatedColumn.index ? updatedColumn : col
    )
  }));
};

3. 添加新列 #

向columnList中追加一条新的列配置：

const addNewColumn = () => {
  setTableModel(prevModel => ({
    ...prevModel,
    columnList: [...prevModel.columnList, {
      index: Math.random(),
      ColumnName: "",
      DataType: "",
      ColumnUnique: "",
      ForeignKey: "",
      EncryptedYn: ""
    }]
  }));
};

说明：所有更新都采用函数式更新模式，保证状态修改的可靠性；操作数组时使用map或扩展运算符，避免直接修改原状态数组（React要求状态不可变）。

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