0
133
ViewsLos datos de la API de React JS no se muestran cuando se usan parámetros
Tengo una API de trabajo. Cuando registro la consola, los datos se muestran, pero cuando intento mostrarlos en la página, funciona.
Estoy usando params también. Pero he agregado la API en su totalidad.
por favor, ayúdame
import React, { useState, useEffect, } from "react"; import {useParams} from 'react-router-dom'; function ProductDetail(param) { const {id} = useParams(); useEffect(() => { fetchItem(); }, []); const [item, setItem] = useState({}); const fetchItem = async () => { const fetchItem = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id=087b55b4-b958-4dc3-8a4b-018fd54d12c4` ); const item = await fetchItem.json(); console.log(item.data); } return ( <div className="containter productsDetails"> <h1>Product Detail </h1> </div> ); } export default ProductDetail;
·
Juan Pablo Isaza
1 answers
Answer question0
El siguiente código debería solucionar su problema. La API devuelve datos como un solo objeto, por lo que cuando intenta representarlos, debe hacerlo como - item['item'].anyPropertyInsideItemObject
Aquí hay una imagen de resultado: 
Espero que así es como querías que funcionara. Puedes modificarlo aún más como quieras.
Código de componente completo:
import React, { useState, useEffect, } from "react"; import {useParams} from 'react-router-dom'; function App() { const {id} = useParams(); useEffect(async () => { const fetchItem = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id=087b55b4-b958-4dc3-8a4b-018fd54d12c4` ); const item = await fetchItem.json(); setItem(item.data) console.log(item.data['item']); setIsLoading(false) }, []); const [item, setItem] = useState({}); const [loading, setIsLoading] = useState(true); return ( <div className="containter productsDetails"> <h1>Product Detail </h1> {!loading && ( <> <h3>Name : {item['item'].name}</h3> <h3>Description : {item['item'].description}</h3> <h3>Series : {item['item'].series}</h3> </> )} </div> ); } export default App;
·
Juan Pablo Isaza
Report
Answer question