如何解决react useEffect问题

Question

我是一个新手，最近我刚刚通过制作一个简单的购物车功能来练习react

这是我从中得到错误的代码的一部分

const MainShop = () => {
const [products, setProducts] = useState([]);
const [category, setCategory] = useState('');
const [sort, setSort] = useState('');
const [filteredProducts, setFilteredProducts] = useState([]);
useEffect(() => {
const fetchItems = async () => {
const data = await fetch('https://fakestoreapi.com/products');
const items = await data.json();
console.log(items);
setProducts(items);
setFilteredProducts(products);
};
fetchItems();
}, []);

错误显示：第42:6:React Hook useEffect缺少依赖项："products"。请将其包括在内或删除依赖项数组。如果"setFilteredProducts"需要"products"react hook/exhaust deps 的当前值，您也可以用useReducer替换多个useState变量

我该如何解决这个问题？

Answer 1

基本上，您应该首先了解什么是useEffect依赖数组。此外，在您的问题中，定义您正在使用的状态以及您在哪里获得products与获取的items有什么区别。如果它们不同，是否有必要将它们保持在相同的useEffect挂钩中？请注意，在一个具有不同依赖项的组件中可以有多个效果挂钩数组

但作为一种快速破解，如果您希望在组件安装时只触发一次提取，请禁用如下所示的依赖性错误。

useEffect(() => {
const fetchItems = async () => {
const data = await fetch('https://fakestoreapi.com/products');
const items = await data.json();
console.log(items);
setProducts(items);
setFilteredProducts(products);
};
fetchItems();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

如果根据过滤器，应再次触发提取

useEffect(() => {
const fetchItems = async () => {
const data = await fetch(`https://fakestoreapi.com/products?filter=${filters}`);
const items = await data.json();
console.log(items);
setProducts(items);
setFilteredProducts(products);
};
fetchItems();
}, [filters]);