请使用 fetch 从 API 获取数据，但只有 JSX return 没有产品。 Api 来自：http://fakestoreapi.com/docs

Question

请我的代码只是 returns JSX 而没有来自 API 的内容。当我 console.log 时，我尝试使用 fetch()，我看到了产品数组。我的问题是如何从 API.

输出这些产品

请帮我调试，我尝试了不同的方法，但我一直都在这一点上。谢谢。

Product.js 文件

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

const Products = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const { title, image, price, category } = products;

  useEffect(() => {
    getProducts();
    // eslint-disable-next-line
  }, []);

  const getProducts = async () => {
    setLoading(true);
    const res = await fetch("https://fakestoreapi.com/products");
    const data = await res.json();

    setProducts(data);
    setLoading(false);

    console.log(data);
  };

  if (loading) {
    return <h4>Loading.....</h4>;
  }

  return (
    <div>
      {!loading && products.length === 0 ? (
        <p className='center'>No logs to show....</p>
      ) : (
        products.map((product) => (
          <div class='card' style={{ width: "18rem" }} key={products.id}>
            <img src={image} class='card-img-top' alt='...' />
            <div class='card-body'>
              <h5 class='card-title'>Card title</h5>
              <p class='card-text'>
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
            </div>
            <ul class='list-group list-group-flush'>
              <li class='list-group-item'>{title}</li>
              <li class='list-group-item'>$ {price}</li>
              <li class='list-group-item'>{category}</li>
            </ul>
            <div class='card-body'>
              <a href='#' class='card-link'>
                Card link
              </a>
              <a href='#' class='card-link'>
                Another link
              </a>
            </div>
          </div>
        ))
      )}
    </div>
  );
};

export default Products;

Answer 1

我也不知道。但这对我有用。

products.map(({ title, image, price, category }, index) => (
      <div key={index} class='card' style={{ width: "18rem" }} key={products.id}>
        <img src={image} class='card-img-top' alt='...' />
        <div class='card-body'>
          <h5 class='card-title'>Card title</h5>
          <p class='card-text'>
            Some quick example text to build on the card title and make up
            the bulk of the card's content.
          </p>
        </div>
        <ul class='list-group list-group-flush'>
          <li class='list-group-item'>{title}</li>
          <li class='list-group-item'>$ {price}</li>
          <li class='list-group-item'>{category}</li>
        </ul>
        <div class='card-body'>
          <a href='#' class='card-link'>
            Card link
          </a>
          <a href='#' class='card-link'>
            Another link
          </a>
        </div>
      </div>
    ))
  )}

您需要在地图功能中添加{ title, image, price, category }。我想是因为map函数不知道什么是{ title, image, price, category }变量，每次使用map函数都要加一个key，别忘了把class=改成className.

Answer 2

您只需使用 product?.title ,product?.price,product?.category 即可访问各个字段。这种方法优于其他方法，因为您不会收到不在 API.

中的字段的错误

Answer 3

您必须首先解构您尝试在 JSX 中使用的属性（标题、价格、类别），然后才能显示它们。

   products.map((product) => {
          const { title, price, category } = product;
          return (****your JSX goes here***)})

请使用 fetch 从 API 获取数据，但只有 JSX return 没有产品。 Api 来自：http://fakestoreapi.com/docs

Please I'm using fetch to get data from an API, but only the JSX return without the products. Api is from: http://fakestoreapi.com/docs

javascript

api

reactjs

react-redux