React Hook useCallback 缺少依赖项：答案

【问题标题】：React Hook useCallback has a missing dependency:React Hook useCallback 缺少依赖项：
【发布时间】：2020-11-20 19:12:38
【问题描述】：

你好，我知道了：

第 82:5 行：React Hook useCallback 缺少依赖项： '产品'。包括它或删除依赖数组。你可以如果您只需要，还可以进行功能更新 'setProduct(p => ...)' 'setProduct' 调用中的'product' react-hooks/exhaustive-deps 行 95:5：React Hook useCallback 缺少依赖项：'product'。包括它或删除依赖数组。你也可以做一个功能更新 'setProduct(p => ...)' 如果您只需要 'product' 'setProduct' 调用 react-hooks/exhaustive-deps

这是我的产品状态：

 const [product, setProduct] = useState({
    sku: "",
    description: "",
    unisex: true,
    woman: false,
    man: false,
    styles: [],
    materials: [],
    selectedFilesImages: [],
    selectedFilesVideos: [],
    name: "",
    discountPrice: "",
    categories: [],
    defaultPicture: [],
    shop: 0,
    variants: [],
    price: "",
  });

这是我使用 useCallBack 的两个函数

 const addSelectedFilesImages = useCallback(
    (files) => {
      setProduct({ ...product, selectedFilesImages: files });
      console.log(product.selectedFilesImages);
    },
    [product.selectedFilesImages]
  );

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

这是我传递这些函数的组件

          <div className="col-sm-6">
              <FileManger
                addSelectedFiles={addSelectedFilesImages}
                selectFiles={product.selectedFilesImages}
                acceptFormat="image/*"
                videoOrPics="Drop files here or click to upload."
              />
            </div>
            <div className="col-sm-6">
              <FileManger
                addSelectedFiles={addSelectedFilesVideos}
                selectFiles={product.selectedFilesVideos}
                acceptFormat="video/*"
                videoOrPics="Drop video files here or click to upload."
              />
            </div>

如果我在每次更新产品时都将产品放入依赖项中，还会渲染 FileManger，则 FileManager 基于 product.selectedFilesVideos 或 product.selectedFilesImages

【问题讨论】：

标签： reactjs

【解决方案1】：

此 linter 警告最后为您提供了一个选项——因为您只需要 setProduct 函数内的 product 状态片段useCallback 钩子，您应该使用 setProduct 的函数语法，它通过在以前的产品中作为参数。

它应该看起来像这样：

const addSelectedFilesImages = useCallback((files) => {
  setProduct((prevProduct) => { // pass an inline function to setProduct
    return {...prevProduct, selectedFilesImages: files}
  })
}, [])

【讨论】：

已解决，谢谢。您可以链接任何有关此的文档吗？我想了解更多关于这个:)。再次感谢
@HarpreetSingh Functional Update 这是关于使用接收前一个状态的函数设置状态的文档。没有太多关于实际 linter 的文档，这增加了一些关于 linting 反应钩子和依赖项的混乱