AgGrid无法重复恢复原始网格数据问题求助

大家好，我碰到了一个AgGrid的棘手问题，想请各位帮忙看看：

• 我通过初始的API请求（这里用Promise模拟延迟返回）填充网格，其中Price字段设置为可编辑
• 第一次修改Price单元格后，点击「Back to original」按钮，能正常把数据恢复到初始状态
• 但第二次修改Price单元格后，再点恢复按钮就完全没效果了

以下是我的完整代码：

import React, { useState, useEffect, useRef } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(
      [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 },
      ]
    );
  }, 300);
});

const App = () => {
  const [rowData, setRowData] = useState([]);
  const initData = useRef([]);
  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price', editable: true },
  ]);

  useEffect(() => {
    let data = myPromise
      .then((data) => {
        console.log(data);
        setRowData(data);
        initData.current = JSON.parse(JSON.stringify(data));
      });
  }, []);

  const restore = () => {
    setRowData(initData.current);
  }

  return (
    <div>
      <button onClick={restore}>Back to original</button>
      <br></br>
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
      </div>
    </div>
  );
};

我排查后发现的问题原因： #

第一次恢复时，我直接把initData.current赋值给了rowData，这导致rowData和initData.current指向了同一个对象数组的引用。第二次编辑Price单元格时，AgGrid会直接修改数组里对象的price属性，这就把initData.current里的原始数据也污染了！所以之后再点恢复，其实是把已经被修改过的“原始数据”重新赋值回去，自然看不出效果。

解决方案： #

修改restore函数，每次恢复时都对原始数据做一次深拷贝，确保rowData拿到的是完全独立的新数组：

const restore = () => {
  // 深拷贝原始数据，避免引用共享导致的原始数据污染
  setRowData(JSON.parse(JSON.stringify(initData.current)));
}

这样每次恢复后，rowData都是全新的对象数组，后续编辑只会修改这个新数组里的内容，initData.current始终保存着最开始的纯净原始数据，不管编辑多少次，恢复按钮都能正常工作了。

备注：内容来源于stack exchange，提问作者Oam Psy