React Hook useEffect缺少一个依赖项："loadAllProducts"。要么包含它，要么删除依赖数组 react-hooks/exhaustive-deps

Question

导出默认函数Home() {

const [products, setProducts] = useState([]);
const [error, setError] = useState(false);
const loadAllProducts = React.useCallback(() => {
getProducts()
.then(data => {
if (data.error) {
setError(data.error);
console.log(error);
} else {
setProducts(data);
}
});
},[]);
useEffect(() => {
loadAllProducts();
}, [loadAllProducts]);

return(
<div>
<h1>Home Component</h1>
<div className="row">
{products.map( (product, index) => {
return(
<div key={index}>
<h1>{product}.name</h1>
</div>
);
})}
</div>
</div>
);

}

执行上述代码后，得到这个错误。useCallback缺少一个依赖项:'error'。要么包含它，要么删除依赖数组。

Answer 1

export default function Home() {
const [products, setProducts] = useState([]);
const [error, setError] = useState(false);
const loadAllProducts = React.useCallback(() => {
getProducts()
.then(data => {
if (data.error) {
setError(data.error);
console.log(error);
} else {
setProducts(data);
}
});
},[error]);
useEffect(() => {
loadAllProducts();
}, [loadAllProducts]);

就像警告说的那样传递依赖项，但在你的情况下，这个依赖项是一个函数，所以最好把它包装在useCallback中，否则你会得到另一个警告。