当我从 AgGrid 中的单元格渲染按钮打印时，所有 useState 变量（如 rowData）均为 null/空

Question

const [groupColumnDefs] = useState([
    {
      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>
        );
      },
    },
  ]);

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

当我通过单击呈现的单元格删除按钮来打印 userGroupData 时，它会打印一个空列表。删除按钮在那里是因为 userGroupData 列表中有两行。为什么我无法在该特定函数中访问这些值？是在一个奇怪的范围内还是什么？

Answer 1

你需要将 UI 与状态分离，我不建议将删除按钮放在状态中，使用

callback

删除项目并更新

userGroupData

，如下所示：

const deleteRow = useCallback((params: any) => {

const updatedData = userGroupData.filter((row: any) => row.id !== params.data.id);

setUserGroupData(updatedData);

}, [userGroupData]); 

之后你可以使用

useMemo

来设置

groupColumnDefs

这样

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

我尝试过在我自己的 IDE 上可以正常工作...