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 };
      });
    },
    []
  );