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