Tengo el siguiente problema al tratar de atravesar una serie de objetos y no sé dónde está el problema.
import './App.css'; import React from 'react'; function App() { const [equipo, setEquipo] = React.useState([]); // Constructor React.useEffect(() => { document.title = "Magic - React"; obtenerDatos(); }, []); // Metodo que recoge info de una Api const obtenerDatos = async () => { const data = await fetch("https://api.scryfall.com/cards/search?order=set&q=e%3Augin&unique=prints"); const info = await data.json(); setEquipo(info); }; return ( <div className="App"> <ul> {equipo.data.map((item) => ( <li>{item.name}</li> ))} </ul> </div> ); } export default App;Aquí está el JSON Api donde busco la información.
https://api.scryfall.com/cards/search?order=set&q=e%3Augin&unique=prints
Intento mostrar las imágenes y el texto de las tarjetas en el HTML. Soy nuevo con React. Por favor ayuda y gracias.
Prueba esto:
return ( <div className="App"> <ul> {equipo?.data?.map((item) => ( <li>{item.name}</li> ))} </ul> </div> );Este es tu problema:
const [equipo, setEquipo] = React.useState([]); En el primer procesamiento, antes de que regrese la llamada a la API, está intentando acceder al campo .data de una matriz vacía. En su lugar, debe inicializar equipo con:
const [equipo, setEquipo] = React.useState({data: []});