反應 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'。 包括它或刪除依賴數組。

因為我沒有添加在依賴項中單擊刪除按鈕時調用的 function ... 為什么我要把它作為依賴項？ 我什至不確定將歷史作為依賴項是否正確； 我認為當年表發生變化時不需要重新評估專欄

我錯了？

謝謝

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 的上下文中被改變，這在本例中不太可能發生）。 而且，您需要將 function 包裝在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並在 useMemo 中定義handleTestDelete useMemo ； 在返回記憶的列之前。

注意：由於我沒有看到您的完整代碼，我建議您測試此代碼並確保正確打印useMemo中的Log 1 （僅一次）。

---

類似帖子：

• eslint 警告 useEffect 中缺少依賴項
• 遵守 react-hooks/exhaustive-deps 會導致無限循環和/或大量 useCallback()