如何在ag-grid中正确更新行数据以实现撤销/重做功能

核心问题是你在valueSetter中直接突变了原数据对象（params.data.ratings属于引用类型），Ag-Grid的Undo/Redo服务依赖不可变数据更新识别变更——只有当数据引用发生变化时，它才能正确记录前后状态并加入撤销栈。

修改后的valueSetter实现 #

valueSetter: (params: ValueSetterParams) => {
  const { data, newValue } = params;
  const targetBookId = book.id; // 确保book变量在当前作用域可访问

  // 检查是否已有该书籍的评分
  const existingRatingIndex = data.ratings.findIndex(r => r.bookId === targetBookId);

  if (existingRatingIndex === -1) {
    // 新增评分：返回全新的data对象，包含新的ratings数组
    params.node.setData({
      ...data,
      ratings: [...data.ratings, { bookId: targetBookId, rating: newValue }]
    });
    return true;
  } else {
    // 更新已有评分：仅当新值与旧值不同时才执行更新
    const existingRating = data.ratings[existingRatingIndex];
    if (existingRating.rating !== newValue) {
      const updatedRatings = [...data.ratings];
      updatedRatings[existingRatingIndex] = { ...existingRating, rating: newValue };
      
      // 用新对象替换原数据
      params.node.setData({
        ...data,
        ratings: updatedRatings
      });
      return true;
    }
    return false;
  }
}

关键修改点说明 #

1. 禁止直接突变原数据：不再使用push或直接修改ratings数组元素，而是通过扩展运算符(...)创建新的数组和对象引用。
2. 使用params.node.setData()更新数据：这是Ag-Grid官方推荐的行数据更新方式，会通知网格数据变更，同时让Undo/Redo服务正确捕获状态变化。
3. 严格判断变更必要性：仅当新值与旧值存在差异时才执行更新，避免不必要的状态记录。

额外配置检查 #

确保GridOptions中已正确启用Undo/Redo功能：

const gridOptions = {
  enableUndoRedo: true,
  // 其他网格配置...
};

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