Question

我该如何修复 React useEffect 问题？

2021-06-01

431

reactjs react-hooks

我是 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”的当前值，您还可以用 useReducer 替换多个 useState 变量 react-hooks/exhaustive-deps

我该如何解决这个问题？

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