React AG Grid保存选中行状态后行选中立即取消问题求助

1. 状态变量名拼写错误 #

你的状态变量初始化时存在拼写错误：selectedComaparisons（多了一个字母a），但更新状态使用的是setSelectedComparisons，这会导致状态无法正确同步，组件重新渲染时按钮的禁用状态判断失效，同时间接引发AG Grid选中状态异常。

修复代码：

// 修正状态变量名拼写
const [selectedComparisons, setSelectedComparisons] = useState([]);

按钮部分同步修正变量名：

<MotifButton
  onClick={() => {
    console.log(selectedComparisons);
  }}
  style={{ width: '220px', marginBottom: '50px'}}
  variant="secondary"
  disabled={selectedComparisons.length === 0}
>
  <MotifIcon
    src={actionIcDelete24px}
    style={{ width: '18px', marginRight: '4px' }}
  />
  Delete Comparisons
</MotifButton>

2. 组件重渲染导致AG Grid选中状态丢失 #

调用setSelectedComparisons更新状态时，组件会触发重渲染。如果AG Grid的核心配置（如rowData、columnDefs）未用useMemo包裹，每次渲染都会生成新的引用，导致AG Grid重新初始化，选中行被清空。

修复方案：
用useMemo包裹rowData和columnDefs，确保它们的引用稳定：

import { useMemo } from 'react';

// 包裹行数据，依赖项根据实际数据来源设置
const rowData = useMemo(() => [
  // 你的行数据内容
], [/* 行数据依赖的外部变量 */]);

// 包裹列定义，无外部依赖则留空数组
const columnDefs = useMemo(() => [
  { field: 'name' },
  { field: 'value' },
  // 其他列配置
], []);

// 渲染AG Grid时使用稳定的配置引用
<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  rowSelection="multiple" // 确保开启多行选择
  onSelectionChanged={handleSelectionChanged}
  // 其他AG Grid配置
/>

3. 确认AG Grid选择模式配置 #

确保AG Grid组件已设置rowSelection="multiple"，否则无法正常启用多行选择，也会导致选中状态异常。

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