我如何解决 react useEffect 问题？

Question

我是 react 新手，最近我刚刚通过制作一个简单的购物车功能来练习 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-hooks/exhaustive-deps 的当前值，您还可以用 useReducer 替换多个 useState 变量

我该如何解决这个问题？

Answer 1

基本上，你应该首先了解什么是useEffect Dependency Array。同样在您的问题中定义您正在使用的状态以及您在哪里获得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]);