Por favor, mi código solo devuelve el JSX sin el contenido de la API. Intenté usar fetch() cuando consola.log, veo la variedad de productos. Mi problema es cómo generar estos productos desde la API.

Por favor, ayúdenme a depurar, he probado diferentes enfoques pero siempre he estado abastecido en este punto. Gracias.

Archivo de producto.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;