AG-Grid中agRichSelectCellEditor多选模式下复杂对象引用丢失问题分析

2025-05-16 18:41:14作者：侯霆垣

问题背景

在AG-Grid企业版中使用agRichSelectCellEditor组件时，当满足以下三个条件时会出现严重的数据一致性问题：

启用了多选模式（multi-select）
使用异步方式获取选项列表数据
选项数据为复杂对象（非简单字符串）

该问题表现为：当单元格已有选中值时，再次打开下拉列表时，已选项未被正确高亮显示，且重复选择会导致数据重复添加而非预期的切换选中状态。

技术原理分析

问题的核心在于JavaScript对象引用比较机制与AG-Grid内部实现的交互方式：

Set集合的比较机制：AG-Grid内部使用Set来管理选中项集合，而Set在判断元素是否存在时使用的是严格相等（===）比较。对于复杂对象，即使内容完全相同，不同实例也会被视为不同元素。
数据来源差异：
- 初始选中值来自行数据（rowData）
- 下拉选项来自异步请求返回的新对象实例
- 虽然数据内容相同，但对象引用不同
预期行为：用户期望基于业务ID（如对象中的id字段）来判断是否为同一选项
实际行为：组件基于对象引用判断，导致逻辑异常

问题复现条件

通过简化测试案例，可以稳定复现该问题：

const rowData = [
  { 
    values: [
      {id: "123", value: "v1"},  // 初始选中值
      {id: "456", value: "v2"}
    ]
  }
];

const cellEditorParams = {
  values: async () => [
    {id: "123", value: "v1"},  // 异步返回的选项（新对象实例）
    {id: "456", value: "v2"},
    {id: "789", value: "v3"}
  ],
  multiSelect: true
};

影响范围

该问题会导致以下业务场景无法正常使用：

需要从服务器动态加载选项列表
选项需要携带额外元数据（复杂对象）
需要支持多选功能
需要保持已选项状态持久化

临时解决方案

在官方修复前，可采用以下临时方案：

数据规范化：在返回异步数据前，合并已有选中值

const mergeSelections = (currentValues, newOptions) => {
  const currentIds = new Set(currentValues.map(v => v.id));
  return newOptions.map(opt => 
    currentIds.has(opt.id) 
      ? currentValues.find(v => v.id === opt.id)
      : opt
  );
};

自定义比较逻辑：扩展agRichSelectCellEditor，重写选中状态判断方法

class CustomRichSelect extends AgRichSelectCellEditor {
  isSelected(value) {
    return this.selectedSet.some(
      selected => selected.id === value.id
    );
  }
}