AgGrid单元格渲染按钮点击时useState变量(userGroupData)为空问题

核心问题：闭包捕获了旧值 #

你的groupColumnDefs通过useState初始化时，userGroupData还是空数组。cellRenderer里的onClick回调形成闭包，捕获了此时的userGroupData引用。后续userGroupData更新时，groupColumnDefs并未重新生成，导致点击按钮时deleteRow仍使用最初的空数组值。

解决方案 #

方案1：让列定义依赖最新数据 #

用useMemo定义groupColumnDefs，将userGroupData设为依赖，确保数据更新时列定义重新生成，闭包捕获最新值：

const groupColumnDefs = useMemo(() => [
    {
      field: "groupName",
      flex: 4,
    },
    {
      field: "Delete",
      flex: 1,
      cellRenderer: (params: any) => {
        return (
          <Button
            className="p-2 w-16 my-1 flex justify-center"
            onClick={() => deleteRow(params)}
            color="red"
          >
            Delete
          </Button>
        );
      },
    },
  ], [userGroupData]);

方案2：用Ref保存最新数据 #

通过useRef存储userGroupData的最新引用，避免闭包捕获旧值：

const userGroupDataRef = useRef(userGroupData);

useEffect(() => {
  userGroupDataRef.current = userGroupData;
}, [userGroupData]);

const deleteRow = (params: any) => {
    console.log(params);
    console.log(userGroupDataRef.current); // 始终获取最新数据
};

方案3：让删除函数依赖最新数据 #

用useCallback包裹deleteRow，将userGroupData设为依赖，确保函数每次数据更新时重新创建：

const deleteRow = useCallback((params: any) => {
    console.log(params);
    console.log(userGroupData);
}, [userGroupData]);

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