Question

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

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

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 依赖数组。同样在您的问题中定义您正在使用的状态以及您在哪里获得 products 与获取的 items 有何不同。如果它们不同，是否有必要将它们放在同一个 useEffect 钩子中？请注意，您可以在一个组件中拥有多个具有不同依赖项数组的效果钩子

但作为一个快速的 hack，如果您希望在组件挂载时仅触发一次获取，请禁用如下所示的依赖错误。

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]);

我如何解决反应 useEffect 问题？

1 个答案: