使用钩子将类组件更改为功能组件答案

【问题标题】：Change Class component to function component with hooks使用钩子将类组件更改为功能组件
【发布时间】：2020-12-21 18:34:52
【问题描述】：

我正在学习 react hook 并尝试将我的类组件更改为函数组件并使用 useEffect 和 useState 使用 hooks 获取数据，但它不起作用。这是我的类组件，下面我将放函数组件的草稿，我认为我使用useEffect的方式有问题。我们将不胜感激。


import React, { useEffect, useState } from 'react';

const Shop = () =>  {

  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    fetch(`/products`)
      .then(response => response.json())
      .then(response => {
      setProducts(products);
    });
  })
  
  return (
    <div>
      {
        products.map(product => (
          <div className="shop ml-5 mt-4" key={product.id}>
            <img className="image" src={product.image} alt=""/><br></br>
            <button className= "mt-4 btn btn-light">QUICKSHOP</button>
            <button className="mt-4 btn btn-light">ADD TO CART</button>
            <p className="mt-4"> {product.title}</p>
            <p>{product.price}</p>
          </div>
        )) }
    </div>
  )
}

export default Shop;

我们将不胜感激。

【问题讨论】：

您可能会考虑在编写代码时使用一致的缩进 - 这将使阅读和调试变得更加容易，不仅对于潜在的回答者，而且对于您来说，当我们都可以看到 { } 块及其嵌套级别一目了然，而不必仔细挑选每一行来挑选逻辑路径。

标签： reactjs react-hooks fetch

【解决方案1】：

在您的类组件中，您希望在挂载时运行getProducts，但在功能组件中，您在每个渲染上运行fetch。向useEffect 添加一个空的依赖数组，以确保它只在挂载时运行，而不是每次都运行。

您还需要使用setProducts(response);，而不是setProducts(products); - products 是现有（空）状态。

useEffect(() => {
  fetch(`/products`)
    .then(response => response.json())
    .then(response => {
      setProducts(response);
    });
}, [])

【讨论】：