在反应中获取数据 returns 一个空数组

Question

我正在从我的后端获取数据 api 并将数据设置为我的状态但是它返回一个空数组并且我不知道为什么会发生这种情况，即使在其他组件中它工作得很好

这是我的代码：

import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import Loader from "../ui/svg/Loader/Loader";
import classes from "./CartDetails.module.scss";

const CartDetails = () => {
  const name = useParams().name;
  const id= useParams().id;
  const [pending, setPending] = useState(true);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchItems() {
      const data = await fetch(`http://localhost:8000/api/cart/${id}`);
      const res = await data.json();
      setProducts(res); 
      setPending(false);
    }

    fetchItems();
  }, []);

  return ( 
    <>
      {pending && <Loader/>}
      <div>
        <h1>{name}'s Cart</h1>
        {products.map(product => {
          <div key={product.name}>
            <h1>{product.name}</h1>
            <img src={product.image} alt={product.name} />
          </div>
        })}
      </div>
    </>
  );
}

export default CartDetails;

Answer 1

我只是在 .map 函数中缺少一个 return

Answer 2

阅读以下内容以获得更好的编码。无需使用 useParams() 两次，在渲染数据时最好拆分代码，这样可以更好地调试

    const CartDetails = () => {
  
  const { name, id } = useParams();
  
  const [pending, setPending] = useState(true);
  const [products, setProducts] = useState([]);

  useEffect(async () => {
    
      const data = await fetch(`http://localhost:8000/api/cart/${id}`);
      const res = await data.json();
      setProducts(res); 
      setPending(false);
   
  }, []);

  const showProduct = (product) => {
      return ( 
                <div key={product.name}>
                    <h1>{product.name}</h1>
                    <img src={product.image} alt={product.name} />
                </div>
             )
  }

  const showCartDetails = () => {
       return (
            <div>
               <h1>{name}'s Cart</h1>
               {
                  products.map(product => showProduct(product)
              )}
            </div>
       )
  }

  return ( 
    <>
      {pending ? <Loader/> : showCartDetails()}
   
    </>
  );
}

export default CartDetails;

在反应中获取数据 returns 一个空数组

fetching data in react returns an empty array

javascript

state

reactjs

fetch-api

react-hooks