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

问题背景

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

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

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

技术原理分析

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

1. Set集合的比较机制：AG-Grid内部使用Set来管理选中项集合，而Set在判断元素是否存在时使用的是严格相等（===）比较。对于复杂对象，即使内容完全相同，不同实例也会被视为不同元素。

2. 数据来源差异：

   • 初始选中值来自行数据（rowData）
   • 下拉选项来自异步请求返回的新对象实例
   • 虽然数据内容相同，但对象引用不同

3. 预期行为：用户期望基于业务ID（如对象中的id字段）来判断是否为同一选项

4. 实际行为：组件基于对象引用判断，导致逻辑异常

问题复现条件

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

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
};

影响范围

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

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

临时解决方案

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

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

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
  );
};

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

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

最佳实践建议

1. 对于简单场景，优先使用值类型（字符串/数字）而非复杂对象
2. 确保异步数据与初始数据使用相同对象引用
3. 为复杂对象实现equals方法，确保正确性比较
4. 在官方修复发布后及时升级版本

总结

该问题揭示了前端数据管理中对象引用一致性的重要性。在使用复杂数据结构和异步数据加载时，开发者需要特别注意数据标识（identity）的管理。AG-Grid团队已将该问题纳入修复计划，建议关注后续版本更新以获取官方解决方案。

对于急需使用的项目，建议采用上述临时解决方案或考虑使用其他单元格编辑器作为过渡方案。理解这一问题的本质也有助于开发者在其他类似场景中避免同类问题的发生。