英文:
AgGrid Unable To Restore Original Grid Data
问题
我在初始 API 调用后填充了网格。其中一个字段是可编辑的 - 价格
如果我编辑一个价格单元格，然后点击还原按钮，原始数据集会被应用。
如果我再次编辑一个价格单元格，还原功能将不再起作用。
示例：https://stackblitz.com/edit/ag-grid-react-hello-world-agjiy2?file=index.js
代码：
英文:
I populate the grid after an intial API call. One of the fields is editiable - Price
If i edit a Price cell, and click the Restore button, the original dataset is applied.
If i edit a Price cell again, the Restore no longer works.
Example: https://stackblitz.com/edit/ag-grid-react-hello-world-agjiy2?file=index.js
Code:
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>);};
答案1
得分: 1
更改您的恢复方法如下：```javascriptconst restore = () => {console.log('initData', initData)var obj = JSON.parse(JSON.stringify(initData.current))setRowData(obj);}
这是因为您在编辑操作之后修改了对象。为了防止它被修改，获取您的initData对象的深拷贝并使用它。
示例代码：
https://stackblitz.com/edit/ag-grid-react-hello-world-fnxqdy?file=index.js
<details><summary>英文:</summary>Change your restore method like that
const restore = () => {
console.log('initData', initData)
var obj = JSON.parse(JSON.stringify(initData.current))
setRowData(obj);
}
It's happening because you modify your object after your edit action. To prevent it modifying, get a deep copy of your initData object and use it.Playground:[https://stackblitz.com/edit/ag-grid-react-hello-world-fnxqdy?file=index.js][1][1]: https://stackblitz.com/edit/ag-grid-react-hello-world-fnxqdy?file=index.js</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论