React Grid实现多行编辑时如何区分不同行的State值

你当前用单个[name, setName] = useState()定义的是全局唯一的name状态，所有行的name输入框都绑定了这同一个状态变量，任意一行触发onChange更新状态时，所有绑定该状态的输入框都会同步渲染新值，自然会出现多行列值联动的问题。

方案1：按行唯一ID存储编辑值（推荐，适合集中管理编辑状态的场景） #

不要用单个字符串类型的状态存字段值，改用对象类型的状态，以每行的唯一标识（比如业务id，禁止用数组下标）为key，分区存储不同行的编辑内容：

• 初始化状态时，可直接从表格原始数据源同步初始值
• 输入框取值时，优先读取对应行ID下的编辑缓存值，无缓存时读取原始行数据
• onChange触发时，仅更新对应行ID下的字段值，不会影响其他行
  代码示例：

// 表格编辑状态，key为行唯一ID，value为对应行的编辑字段值
const [editMap, setEditMap] = useState({})

// 通用字段更新函数
const handleCellChange = (rowId, field, value) => {
  setEditMap(prev => ({
    ...prev,
    [rowId]: {
      ...prev[rowId],
      [field]: value
    }
  }))
}

// 渲染表格行
{tableData.map(row => (
  <tr key={row.id}>
    {/* 其他列 */}
    <td>
      <input
        // 优先取编辑状态值，不存在则取原始行值
        value={editMap[row.id]?.name ?? row.name}
        onChange={e => handleCellChange(row.id, 'name', e.target.value)}
      />
    </td>
  </tr>
))}

这个方案逻辑集中，最终提交时遍历editMap即可拿到所有被修改的行数据，适合需要批量保存、跨行校验的场景。

方案2：抽离单行组件做状态隔离（适合单行独立保存的场景） #

如果不需要跨行做编辑逻辑联动，可以把可编辑行抽为独立组件，每个行组件内部维护自身的编辑状态，组件实例之间状态天然隔离，完全不会出现值联动问题：
代码示例：

// 独立可编辑行组件
const EditableTableRow = ({ initialRowData, onRowSave }) => {
  // 每个行组件实例独立维护自己的状态，和其他行互不影响
  const [name, setName] = useState(initialRowData.name)

  return (
    <tr>
      {/* 其他列 */}
      <td>
        <input
          value={name}
          onChange={e => setName(e.target.value)}
        />
      </td>
      <td>
        <button onClick={() => onRowSave(initialRowData.id, { name })}>
          保存
        </button>
      </td>
    </tr>
  )
}

// 父组件渲染表格
{tableData.map(row => (
  <EditableTableRow
    key={row.id}
    initialRowData={row}
    onRowSave={(rowId, updatedData) => {
      // 调用接口提交单行修改
    }}
  />
))}

• 禁止用数组下标作为行key或者状态存储的标识，一旦做排序、删除、新增行操作，下标会错位导致编辑状态串列
• 可以额外维护一个修改行ID集合，标记哪些行被编辑过，提交时只处理被修改的行，减少不必要的请求
• 需要支持取消编辑时，直接删除editMap中对应行ID的缓存值，输入框就会自动回退显示原始数据源的值

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