用钩子将类组件更改为函数组件

Question

我正在学习react，并尝试将类组件转换为一个函数组件，并使用useEffect和useState用钩子获取数据，但是它不起作用。这是我的类组件，下面是函数组件的草稿，我认为我使用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;

所有的帮助都将不胜感激。

Answer 1

在类组件中，您希望在挂载上运行getProducts，但是在functional中，您需要在每次呈现时运行fetch。向useEffect添加一个空依赖数组，以确保它只在挂载上运行，而不是每次运行。

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

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