3 
  const handleTestDelete = (id: any) => {
    deleteTest(id).then(() => {
      queryClient.invalidateQueries("test");
    });
  };

  const columns = useMemo(
    () => [
      { field: "id", headerName: "ID", width: 80 },
      {
        field: "",
        width: 120,
        disableClickEventBubbling: true,
        sortable: false,
        disableColumnMenu: true,
        renderCell: (cell: any) => (
          <>
            <IconButton
              aria-label="delete"
              onClick={() => handleTestDelete(cell.id)}
            >
              <DeleteIcon fontSize="small" />
            </IconButton>
            <IconButton
              aria-label="view"
              onClick={() => history.push(`/something/${cell.id}/details`)}
            >
              <VisibilityIcon fontSize="small" />
            </IconButton>
          </>
        ),
      },
    ],
    [history]

我收到此警告

React Hook useMemo 缺少一个依赖项：'handleTestDelete'。包括它或删除依赖数组。

因为我没有在依赖项中添加单击删除按钮时调用的函数......为什么我要把它作为依赖项？我什至不确定将历史作为依赖项是否正确；我认为当年表发生变化时不需要重新评估专栏

我错了？

谢谢

4

1 回答 1

3

如果您正在使用useMemo，则应按照eslint-plugin-react-hooks的建议满足其依赖关系：

const history = useHistory()

const columns = useMemo(() => {
  console.log("define memoized columns") // Log 1
  return [
    { field: 'id', headerName: 'ID', width: 80 },
    {
      // ... code here
      renderCell: (cell: any) => (
        <>
          <IconButton
            aria-label="delete"
            onClick={() => handleTestDelete(cell.id)}
          >
            <DeleteIcon fontSize="small" />
          </IconButton>
          <IconButton
            aria-label="view"
            onClick={() => history.push(`/something/${cell.id}/details`)}
          >
            <VisibilityIcon fontSize="small" />
          </IconButton>
        </>
      ),
    },
  ]
}, [history, handleTestDelete])

使用history是安全的，因为它不会改变（除非它在 ​​React Router 的上下文中被改变，这在本例中不太可能发生）。而且，您需要将该函数包装在useCallback：

const handleTestDelete = useCallback((id: any) => {
  deleteTest(id).then(() => {
    queryClient.invalidateQueries('test')
  })
}, []) // <---- Here, you need to add the dependencies as well (maybe queryClient)

您在这里可能还有一个选择：handleTestDelete从useMemo的依赖项中删除并在;中定义handleTestDelete函数。useMemo在返回记忆的列之前。

注意：由于我没有看到您的完整代码，我建议您测试此代码并确保正确打印Log 1 in useMemo（仅一次）。

类似帖子：

于 2021-04-28T16:58:18.810 回答