Estoy tratando de extraer los datos de esta API https://fe-assignment.vaimo.net/ para representar el nombre del objeto. Debería ser un artículo de venta de drones, pero no puedo mostrarlo en el mapeo o algo así.
Solo tengo que extraer los datos de estos elementos y no hay otros objetos o similares en la API. Eventualmente quiero mostrar el producto con su imagen y todos sus atributos, pero solo estoy tratando de extraer cadenas simples del JSON como el nombre del producto.
El resultado del código anterior cuando se ejecutó es simplemente el encabezado sin más contenido. Ambos registros de la consola devuelven los datos de la API completos. Ver ComponentDidMount y renderizar
import { render } from "@testing-library/react" import React from "react" import "./App.css" import {useState, useEffect } from 'react' import axios from 'axios' import Colors from "./components/Colors" import DetailsThumb from "./components/DetailsThumb" class App extends React.Component { constructor(props) { super(props); this.state = { items: [], isLoaded: false, }; } componentDidMount() { fetch("https://fe-assignment.vaimo.net/") .then((res) => res.json()) .then(data => { console.log(data) this.setState({ isLoaded: true, items: data, }); }); } render() { let content = null var { isLoaded, items } = this.state; if (!isLoaded) { return <div>Loading..</div>; } else { console.log(items) if (items.data){ content = items.map((product, key) => <div>{product.name}</div>) } return ( <div> <h1>The drone page</h1> {content} </div> ); } } } export default App;No está obteniendo una lista de productos, está obteniendo un solo producto, así que en lugar de esto:
if (items.data){ content = items.map((product, key) => <div>{product.name}</div>) }Usted debe hacer esto:
if (items) { content = <div>{items.product.name}</div> }El problema es que está almacenando el resultado de la función de mapa (una matriz) en una nueva matriz.
if (items.data){ content = items.map((product, key) => <div>{product.name}</div>) }Usted debe hacer esto
if (items.data){ content = items.product.name }