0

0

如何解决 Ag-Grid 中无法多次恢复原始数据的问题

心靈之曲

心靈之曲

发布时间:2026-01-11 13:14:02

|

687人浏览过

|

来源于php中文网

原创

如何解决 Ag-Grid 中无法多次恢复原始数据的问题

ag-grid 编辑单元格后调用 restore 仅生效一次,根本原因是直接复用引用的原始数据对象导致状态污染;需在每次恢复时创建深拷贝,确保数据隔离。

在使用 Ag-Grid(尤其是 React 版本)时,一个常见误区是:将初始数据保存为 useRef 引用后,在 restore 操作中直接赋值该引用——看似“还原”,实则因 React 组件内网格编辑会就地修改 rowData 中的对象属性(如 row.price = newValue),导致 initData.current 所指向的原始数组及其内部对象已被污染。

例如,初始数据为:

[{ make: 'Toyota', model: 'Celica', price: 35000 }]

当用户编辑 Price 后,Ag-Grid 默认会直接修改该对象的 price 字段。若 initData.current 仍指向同一内存地址的对象,那么第一次 restore 虽然“看起来”恢复了,但此时 initData.current[0].price 已被改写;第二次 restore 实际恢复的是已被篡改过的“原始值”,造成失效假象。

✅ 正确做法:每次 restore 时生成原始数据的深拷贝,切断与已编辑数据的引用关联:

DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

下载
const restore = () => {
  // 使用 JSON 序列化+反序列化实现轻量深拷贝(适用于纯JSON数据)
  const freshCopy = JSON.parse(JSON.stringify(initData.current));
  setRowData(freshCopy);
};

⚠️ 注意事项:

  • JSON.parse(JSON.stringify(obj)) 不适用于含函数、Date、undefined、RegExp 或循环引用的对象;若业务数据结构复杂,建议使用 lodash.cloneDeep 或自定义深克隆工具
  • 避免在 useEffect 中直接赋值 initData.current = data,而应始终通过 JSON.stringify 等方式初始化,确保初始快照纯净;
  • 若启用了 Ag-Grid 的 immutableData: true 选项,则网格不会直接修改原始对象,此时可安全复用引用——但需同步开启 deltaRowDataMode: true 并配合 getRowNodeId 使用,适用场景有限。

总结:状态管理的核心在于不可变性(immutability)。Ag-Grid 的编辑行为默认是 mutable 的,因此开发者必须主动保障 restore 数据的“一次性新鲜度”。一句口诀:“恢复必深拷,引用不共享” —— 这是保障多次还原功能稳定可靠的底层准则。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

408

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

532

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

309

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

74

2025.09.10

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

533

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

17

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

13

2026.01.06

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

4399

2023.07.31

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

79

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.5万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号