react-table V7编辑未点保存时如何回滚恢复原有数据

核心逻辑是进入编辑态前留存原始数据快照，所有退出编辑但未保存的场景都用快照还原数据，两类触发场景的回滚逻辑可以完全复用。 #

具体实现步骤 #

1. 新增两个独立状态管理编辑上下文 #

不要直接把临时编辑值存在表格数据源里，单独拆分状态存储编辑状态和原始数据：

// 当前处于编辑态的行ID，null代表没有正在编辑的行
const [editingRowId, setEditingRowId] = useState(null);
// 进入编辑态时留存的行原始数据快照
const [editingRowOriginal, setEditingRowOriginal] = useState(null);

2. 抽离公共回滚方法 #

把回滚数据、重置编辑态的逻辑抽成独立函数，两个场景直接复用：

const rollbackEdit = () => {
  if (!editingRowId || !editingRowOriginal) return;
  // 用原始快照覆盖被修改的行数据
  setTableData(prev => 
    prev.map(row => row.id === editingRowId ? editingRowOriginal : row)
  );
  // 清空编辑状态
  setEditingRowId(null);
  setEditingRowOriginal(null);
};

3. 编辑按钮逻辑加切换校验 #

点击任意行的编辑按钮时，先判断是否存在未保存的其他编辑行：

• 如果有，先执行回滚逻辑把上一行的修改还原
• 再深拷贝当前行的原始数据存为快照，最后把当前行设为编辑态

注意必须深拷贝原始数据，避免对象引用导致快照跟着输入值同步变化，现代浏览器原生支持structuredClone()做深拷贝，兼容旧环境时可以用JSON.parse(JSON.stringify(row.original))实现简单深拷贝

const handleEditStart = (currentRow) => {
  // 切换编辑行时先回滚上一行的未保存修改
  if (editingRowId && editingRowId !== currentRow.id) {
    rollbackEdit();
  }
  // 存原始快照
  setEditingRowOriginal(structuredClone(currentRow.original));
  setEditingRowId(currentRow.id);
};

4. 绑定取消按钮事件 #

直接给取消按钮的点击事件绑定rollbackEdit即可，点击后会自动还原数据、退出编辑态。

补充注意点 #

保存接口请求成功后，一定要手动清空editingRowId和editingRowOriginal状态，避免下次进入编辑时读取到旧快照。

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