React useMemo 缺少依赖项

Question

  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”。包含它或删除依赖项数组。

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

我错了？

谢谢

Answer 1

如果您正在使用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

类似的帖子：

• eslint 警告 useEffect 中缺少依赖项
• 遵守react-hooks/exhaustive-deps会导致无限循环和/或大量useCallback()