反应。调用 API 时多次加载数据答案

【问题标题】：Reactjs. Multiple data loading when calling the API反应。调用 API 时多次加载数据
【发布时间】：2022-06-22 21:53:23
【问题描述】：

调用 API 获取产品时，结果很好，因为它在屏幕上显示了所有产品，但在控制台中，我看到数据被多次调用。在控制台中，console.log 在加载和重新加载页面上打印 6 次。

const ProductList = () => {
  const products = useGetProducts(`${API}?limit=5&offset=1`);
  
  console.log("products: ", products);

  return (
    <section>
      <div>
        {products.map((product) => (
          <ProductItem product={product} key={product.id} />
        ))}
      </div>      
    </section>
  )
}



const useGetProducts = (API) => {
  const [products, setProducts] = useState([])

  useEffect(() => {
    async function fetchData() {
      const response = await axios(API);
      setProducts(response.data)
    }
    fetchData();
  }, []);

  return products;
}

【问题讨论】：

组件层次结构中的任何内容都可能导致该组件重新渲染。您是否观察到它实际上多次调用 API？还是您观察到它只是多次登录到控制台？

标签： reactjs

【解决方案1】：

在 useEffect 中使用依赖，这样它只会在获取数据时渲染一次，并且在 useEffect 结束时使用 return 语句。

【讨论】：

【解决方案2】：

某事使您的组件呈现不止一次，重复 API 获取。 UseEffects的第二个参数可以让代码只在某些变量更新时才执行，试试看吧。

【讨论】：