AG Grid CellRenderer点击View后颜色未更新为红色问题

问题分析 #

你的代码通过useMemo定义列配置，在cellRenderer中根据clickedVws数组判断点击状态设置文字颜色，但点击后颜色未更新，大概率是以下两个原因：

1. clickedVws的更新不是不可变操作：如果handleViewClick中直接修改原数组（比如clickedVws.push(data.vw)），数组引用未变化，useMemo不会触发重新计算，列配置和cellRenderer都不会更新，颜色判断仍使用旧值。
2. AG Grid未触发单元格重渲染：即使useMemo重新生成列配置，AG Grid有时不会自动刷新对应单元格，需要手动触发。

解决方案 #

1. 确保clickedVws的更新是不可变的

修改handleViewClick，用不可变方式更新数组，保证每次更新生成新数组，触发useMemo重新计算：

const handleViewClick = (vw) => {
  // 示例：切换点击状态（添加/移除当前vw）
  setClickedVws(prev => {
    if (prev.includes(vw)) {
      return prev.filter(item => item !== vw);
    } else {
      return [...prev, vw];
    }
  });
};

2. 手动触发AG Grid单元格刷新

如果第一步后颜色仍未更新，在clickedVws变化时调用Grid API刷新对应单元格：
首先获取Grid API：

const [gridApi, setGridApi] = useState(null);

const onGridReady = (params) => {
  setGridApi(params.api);
};

然后通过useEffect触发刷新：

useEffect(() => {
  if (gridApi) {
    gridApi.refreshCells({
      columns: ['vw'], // 仅刷新View列，提升性能
      force: true // 强制触发重渲染
    });
  }
}, [clickedVws, gridApi]);

同时在AG Grid组件中绑定onGridReady：

<AgGridReact
  onGridReady={onGridReady}
  // 其他配置项...
/>

3. 优化cellRenderer写法（可选）

将外部状态通过cellRendererParams传递，避免闭包问题，逻辑更清晰：

const memoizedCols = useMemo(() => {
  return [
    {
      headerName: "View",
      field: "vw",
      wrapHeaderText: true,
      width: 80,
      cellRendererParams: {
        clickedVws,
        handleViewClick,
        setShowPopPdf,
        getDocument
      },
      cellRenderer: ({ data, params }) => {
        const isClicked = params.clickedVws.includes(data.vw);
        return (
          <span
            className="check-pointer"
            style={{
              color: isClicked ? "red" : "#009EF7",
              cursor: "pointer",
            }}
            onClick={() => {
              params.handleViewClick(data.vw);
              params.setShowPopPdf(true);
              params.getDocument({ tab: "regulatory", eid: data.vw });
            }}
          >
            View
          </span>
        );
      },
    },
    ...dailyReportTabs
      .find((tab) => tab.key === "regulatory")
      .cols.filter((col) => !["View", "Action"].includes(col.headerName)),
  ];
}, [clickedVws, dailyReportTabs, handleViewClick, setShowPopPdf, getDocument]);

验证步骤 #

• 点击「View」后，查看控制台打印的VW: xxx, Color: red是否正确输出
• 检查useMemo中console.log("clicked vw", clickedVws)的数组引用是否变化

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