reactjs - 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 has a missing dependency: 'handleTestDelete'. Either include it or remove the dependency array.

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

我错了吗？

谢谢

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)

在这里你可能还有一个选择:从 useMemo 的依赖项中删除 handleTestDelete 并在 中定义 handleTestDelete 函数使用备忘录;在返回内存列之前。

注意:由于我没有看到你的完整代码，我建议你测试这段代码并确保 useMemo 中的 Log 1 被正确打印(只有一次)。

---

类似的帖子:

• eslint warning for missing dependency in useEffect
• Obeying react-hooks/exhaustive-deps leads to infinite loops and/orlots of useCallback()