Reactjs React Hook useCallback缺少依赖项：

你好，我收到这个：

第82:5行：React Hook useCallback缺少依赖项： “产品”。包括它或删除依赖项数组。你可以 如果只需要，还可以执行功能更新“setProduct（p=>…）” “setProduct”调用行中的“product” 95:5:React Hook useCallback缺少依赖项：“product”。 包括它或删除依赖项数组。你也可以做一个 功能更新“setProduct（p=>…）”，如果您只需要中的“product” “setProduct”调用react钩子/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.selectedfileimages

此linter警告在结尾处为您提供了一个选项–因为您只需要

setProduct

钩子的

setProduct

函数中的

状态块，您应该使用
setProduct
将上一个产品作为参数传入

它应该是这样的：

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

此linter警告在结尾处为您提供了一个选项–因为您只需要
useCallback
钩子的
setProduct
函数中的
product
一段状态，您应该使用
setProduct
的函数语法，该语法作为参数传入上一个产品

它应该是这样的：

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

谢谢。你能链接任何关于这个的文档吗？我想了解更多有关这方面的信息：）。谢谢again@HarpreetSingh以下是有关使用接收前一状态的函数设置状态的文档。关于实际的linter没有太多文档，这增加了一些关于linting react hook和dependenciesResolved的混淆，谢谢。你能链接任何关于这个的文档吗？我想了解更多有关这方面的信息：）。谢谢again@HarpreetSingh以下是有关使用接收前一状态的函数设置状态的文档。关于实际的linter没有太多文档，这增加了对linting和依赖关系的一些混淆