编辑后更新数据需保留新旧值，如何保存原始数据？

阿华AIGC实验室

2026-5-19

如何保留编辑时的原始值不被覆盖？

这问题我之前做表单编辑功能时也踩过坑！核心逻辑很简单：在编辑流程启动的那一刻，就给原始数据做一份完全独立的备份，让编辑操作只作用于备份的副本，这样原始值就不会被覆盖，随时能拿到。

给你几个不同场景下的具体实现方案：

1. 基础方案：深拷贝原始值到独立变量

不管你用的是React、Vue还是纯JS，这都是最通用的思路。关键是要用深拷贝（不能用浅拷贝，否则对象/数组的引用还是共用的，修改副本会连带改原始值）。

举个React函数组件的例子：

// 假设你用useState管理编辑中的数据
const [item, setItem] = useState({});
// 用useRef存原始值，避免组件重渲染时被重置
const originalItemRef = useRef(null);

// 当用户点击「编辑」按钮时，初始化编辑状态并备份原始值
const startEditing = (selectedItemToEdit) => {
  // 用JSON方法深拷贝（适合没有特殊类型的数据，比如Date、函数）
  const original = JSON.parse(JSON.stringify(selectedItemToEdit));
  originalItemRef.current = original;
  // 把原始值的副本赋值给item，后续编辑只修改item
  setItem(original);
};

// 输入框 onChange 事件，只更新item的新值
const handleInputChange = (e) => {
  const { name, value } = e.target;
  setItem(prev => ({ ...prev, [name]: value }));
};

// 提交时就能同时拿到原始值和新值
const handleSubmit = () => {
  console.log("原始值：", originalItemRef.current);
  console.log("新值：", item);
  // 这里写你的更新逻辑，比如对比差异、提交到后端等
};

如果你的数据里有JSON无法处理的类型（比如Date、Symbol、函数），可以用lodash.cloneDeep()来深拷贝，或者自己写一个递归的深拷贝函数。

2. 状态管理方案：在状态中同时保存原始值和编辑值

如果项目用了状态管理（比如React Context、Redux，或者Vuex），可以把编辑状态设计成包含original和current两个字段的对象，这样整个组件树都能方便地获取到这两个值：

// React Context 示例
const EditContext = createContext();

const EditProvider = ({ children }) => {
  const [editData, setEditData] = useState({
    original: null,
    current: null
  });

  const startEditing = (item) => {
    setEditData({
      original: JSON.parse(JSON.stringify(item)),
      current: JSON.parse(JSON.stringify(item))
    });
  };

  const updateCurrentValue = (key, value) => {
    setEditData(prev => ({
      ...prev,
      current: { ...prev.current, [key]: value }
    }));
  };

  return (
    <EditContext.Provider value={{ editData, startEditing, updateCurrentValue }}>
      {children}
    </EditContext.Provider>
  );
};

之后在组件里消费Context，就能直接拿到editData.original（原始值）和editData.current（新值）。

3. 类组件方案：把原始值存在实例属性中

如果还在用React类组件，可以把原始值存在组件的实例属性里，避免和state里的编辑值混淆：

class EditForm extends React.Component {
  // 实例属性存原始值，不会随state更新而变化
  originalItem = null;

  state = {
    item: {}
  };

  componentDidMount() {
    const { selectedItemToEdit } = this.props;
    this.originalItem = JSON.parse(JSON.stringify(selectedItemToEdit));
    this.setState({ item: selectedItemToEdit });
  }

  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState(prev => ({
      item: { ...prev.item, [name]: value }
    }));
  };

  handleSubmit = () => {
    console.log("原始值：", this.originalItem);
    console.log("新值：", this.state.item);
    // 执行更新逻辑
  };

  render() {
    // 渲染表单...
  }
}