AG-Grid自定义CellEditor值不渲染，如何强制组件刷新？

使用React + AG Grid开发表格，自定义了基于Ant Design Select的CellEditor，选择选项后单元格无法即时显示选中值，必须再次点击单元格并退出编辑状态才会生效。调用api.refreshCells()也没效果，求解决方法。

自定义CellEditor组件 #

interface ICellEditorReactComp {
  api: any;
  values: string[];
  getValue: any;
  change: any;
  dropdownValue: string;
}

export const DropdownCell = observer(
  forwardRef((props: ICellEditorReactComp, ref) => {
    
    console.log("asdasd", props);
    const handleChange = (value) => {

      props.api.refreshCells();
      props.change(value);
    };

    const getValue = () => {
      return props.dropdownValue;
    };

    useImperativeHandle(ref, () => ({
      getValue,
    }));

    return (
      <Select
        defaultValue={props.dropdownValue}
        style={{ width: "100%", height: "100%" }}
        onChange={handleChange}
        options={props.values.map((item) => {
          return { value: item, label: item };
        })}
      ></Select>
    );
  }),
);

表格组件核心代码 #

const ParametersListsTable: React.FC<ParametersListsTableProps> = ({
  filterText,
  rowData,
  descriptionInputs,
  onGeneratedListsChange,
  generatedLists,
  descriptionCellValue,
  methodCellValue,
})

const columns: any = [
    {
      field: "Description",
      headerName: "Description",
      width: 200,
      cellEditor: DropdownCell,
      cellEditorParams: {
        values: inputs,
        change: (value) => {
          dropdownCellRenderState.SetDropdownInputDescValue(value);
        },
        dropdownValue: dropdownCellRenderState.dropdownInputDescValue,
      },
      cellDataType: true,
      singleClickEdit: true,
    },
    ]

  return (
    <Flex vertical gap="small">
      <Flex gap="middle" horizontal wrap="wrap">
        <SearchBar />

        <Button type="primary" onClick={onNewRecordClick}>
          New record
        </Button>

        <Button danger onClick={onDeleteSelectedRowsClick}>
          Delete selected rows
        </Button>

        <Button onClick={onGenerateParametersListClick}>
          Generate parameters list
        </Button>
      </Flex>
      <div
        className="ag-theme-balham"
        style={{ height: "100%", width: "100%" }}
      >
        <AgGridReact
          columnDefs={columns}
          defaultColDef={defaultColDef}
          rowData={rowData}
          rowHeight={44}
          rowMultiSelectWithClick={true}
          rowSelection="multiple"
          overlayNoRowsTemplate={noRowsTemplate}
          quickFilterText={filterText}
          animateRows={true}
          domLayout="autoHeight"
          onSelectionChanged={onSelectionChanged}
        />
      </div>
    </Flex>
  );
};

export default observer(ParametersListsTable);

核心问题 #

1. 未同步更新AG Grid的rowData：单元格渲染完全依赖rowData，仅更新本地状态dropdownCellRenderState无法让表格感知变化
2. refreshCells()调用时机和范围错误：未指定精准的刷新目标，且调用时机在状态更新之前
3. Select组件未使用受控模式：defaultValue仅初始化生效，编辑过程中无法同步选中状态

具体修改步骤 #

1. 调整自定义CellEditor组件 #

interface ICellEditorReactComp {
  api: any;
  values: string[];
  change: any;
  dropdownValue: string;
  node: any; // 新增，用于获取当前行信息
}

export const DropdownCell = observer(
  forwardRef((props: ICellEditorReactComp, ref) => {
    const handleChange = (value) => {
      // 直接调用父组件回调，传递当前行节点
      props.change(value, props.node);
    };

    // AG Grid会调用此方法获取编辑器最终值
    const getValue = () => {
      return props.dropdownValue;
    };

    useImperativeHandle(ref, () => ({
      getValue,
    }));

    return (
      <Select
        value={props.dropdownValue} // 改为受控的value，实时同步选中状态
        style={{ width: "100%", height: "100%" }}
        onChange={handleChange}
        options={props.values.map((item) => ({ value: item, label: item }))}
      />
    );
  }),
);

2. 修改表格列配置与状态更新逻辑 #

const columns: any = [
  {
    field: "Description",
    headerName: "Description",
    width: 200,
    cellEditor: DropdownCell,
    // 改为函数式参数，获取当前行的node信息
    cellEditorParams: (params: any) => ({
      values: inputs,
      change: (value: string, node: any) => {
        // 1. 更新本地状态
        dropdownCellRenderState.SetDropdownInputDescValue(value);
        // 2. 同步更新rowData核心数据
        const updatedRowData = [...rowData];
        // 假设行数据有唯一标识id，定位当前行
        const rowIndex = updatedRowData.findIndex(row => row.id === node.data.id);
        if (rowIndex !== -1) {
          updatedRowData[rowIndex] = {
            ...updatedRowData[rowIndex],
            Description: value
          };
          // 通知父组件更新rowData（若rowData由父组件传入）
          onGeneratedListsChange?.(updatedRowData);
          // 3. 精准刷新当前单元格
          params.api.refreshCells({
            rowNodes: [node],
            columns: ['Description'],
            force: true // 强制触发刷新
          });
        }
      },
      dropdownValue: dropdownCellRenderState.dropdownInputDescValue,
      node: params.node // 传递当前行节点给编辑器
    }),
    cellDataType: true,
    singleClickEdit: true,
  },
];

3. 确保rowData响应式更新 #

如果rowData是父组件传递的props，需确保父组件在收到updatedRowData后，会将最新数据重新传递给表格组件，保证AG Grid能感知到数据变化。

内容的提问来源于stack exchange，提问作者Angel Gabriel Chable Concepcio