React Hook useCallback 缺少依赖项：

Question

你好，我得到了这个：

第 82:5 行：React Hook useCallback 缺少依赖项：'product'。 包括它或删除依赖项数组。 如果您只需要“setProduct”调用中的“product”，您还可以执行功能更新“setProduct(p => ...)” react-hooks/exhaustive-deps Line 95:5: React Hook useCallback has a missing dependency ： '产品'。 包括它或删除依赖项数组。 如果您只需要“setProduct”调用中的“product”，您还可以执行功能更新“setProduct(p => ...)” 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

Answer 1

这个 linter 警告在最后为您提供了一个选项——因为您只需要useCallback钩子的setProduct函数内的product状态，您应该使用setProduct的函数语法，该语法将前一个产品作为参数传递。

它应该是这样的：

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