[英]React Hook useCallback has a missing dependency:
Hello i'm getting this :你好,我得到了这个:
Line 82:5: React Hook useCallback has a missing dependency: 'product'.
第 82:5 行:React Hook useCallback 缺少依赖项:'product'。 Either include it or remove the dependency array.
包括它或删除依赖项数组。 You can also do a functional update 'setProduct(p => ...)' if you only need 'product' in the 'setProduct' call react-hooks/exhaustive-deps Line 95:5: React Hook useCallback has a missing dependency: 'product'.
如果您只需要“setProduct”调用中的“product”,您还可以执行功能更新“setProduct(p => ...)” react-hooks/exhaustive-deps Line 95:5: React Hook useCallback has a missing dependency : '产品'。 Either include it or remove the dependency array.
包括它或删除依赖项数组。 You can also do a functional update 'setProduct(p => ...)' if you only need 'product' in the 'setProduct' call react-hooks/exhaustive-deps
如果您只需要“setProduct”调用中的“product”,您还可以执行功能更新“setProduct(p => ...)” react-hooks/exhaustive-deps
this is my product state :这是我的产品状态:
const [product, setProduct] = useState({
sku: "",
description: "",
unisex: true,
woman: false,
man: false,
styles: [],
materials: [],
selectedFilesImages: [],
selectedFilesVideos: [],
name: "",
discountPrice: "",
categories: [],
defaultPicture: [],
shop: 0,
variants: [],
price: "",
});
Here are my two functions that use useCallBack这是我使用 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]
);
here is my component to which i pass these functions这是我将这些函数传递给的组件
<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>
If i put product in the dependency everytime product is updated also FileManger is rendered , FileManager is based on product.selectedFilesVideos or product.selectedFilesImages如果每次更新产品时我都将产品置于依赖项中,还会呈现 FileManger ,则 FileManager 基于 product.selectedFilesVideos 或 product.selectedFilesImages
This linter warning gives you an option at the end – since you only need the product
piece of state inside the setProduct
function of the useCallback
hook that you should use the functional syntax of setProduct
which passes in the previous product as an argument.这个 linter 警告在最后为您提供了一个选项——因为您只需要
useCallback
钩子的setProduct
函数内的product
状态,您应该使用setProduct
的函数语法,该语法将前一个产品作为参数传递。
It should look something like this:它应该是这样的:
const addSelectedFilesImages = useCallback((files) => {
setProduct((prevProduct) => { // pass an inline function to setProduct
return {...prevProduct, selectedFilesImages: files}
})
}, [])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.