React hook 有一個不必要的依賴

Question

你好，我得到了這個：

React Hook useCallback 有一個不必要的依賴：'product.selectedFilesVideos'。 排除它或刪除依賴數組 react-hooks/exhaustive-deps

我的狀態：

const [product, setProduct] = useState({
     .......
    selectedFilesVideos: [],
     .......
  });

我的功能：

  const addSelectedFilesVideos = useCallback(
    (files) => {
      setProduct((prevProduct) => {
        return { ...prevProduct, selectedFilesVideos: files };
      });
    },
    [product.selectedFilesVideos]
  );

我在哪里使用它：

<FileManger
  addSelectedFiles={addSelectedFilesVideos}
  selectFiles={product.selectedFilesVideos}
  acceptFormat="video/*"
  videoOrPics="Drop video files here or click to upload."
/>

Answer 1

你傳遞給依賴數組product.selectedFilesVideos ，它沒有在useCallback的函數中useCallback 。 此數組用於在更新依賴項之一時調用useCallback和 update 函數。

這就是為什么會有 React 警告。

更多信息： https : //reactjs.org/docs/hooks-reference.html#usecallback

Answer 2

您可以通過從“useCallback”的依賴項數組中刪除product.selectedFilesVideos來解決警告。 由於回調掛鈎在此數組中沒有實際依賴項，因此它仍應按預期工作，並且會修復您的警告。

 const addSelectedFilesVideos = useCallback(
    (files) => {
      setProduct((prevProduct) => {
        return { ...prevProduct, selectedFilesVideos: files };
      });
    },
    []
  );