Intenté todo lo que pude pero, por alguna razón, solo se muestra el primer índice de la matriz ( [{...}, {...}, {...}] ) en el navegador; el otro dos índices están siendo ignorados. Busqué este problema en SO y encontré algunos problemas similares que enfrentaban las personas, pero ninguna de sus soluciones funcionó para mí.
¿Qué estoy haciendo mal? ¿Cómo puedo hacer que todos los contenidos de la matriz se muestren en el navegador?
Aquí está mi código:
import React, {useEffect, useState} from "react"; import '../../../sass/prizes/prizes.scss'; const Prizes = () => { const [prizeData, setPrizeData] = useState([]); useEffect(() => { axios.get('http://localhost/api/prizes') .then(resp => { setPrizeData([resp]); console.log(prizeData) }).catch(error => { console.log(error); }); }, []); return ( <div className="main"> <h1>Prizes</h1> <ul className="cards"> <li className="cards_item"> <div className="card"> { prizeData.map((prizes, index) => { return( <> <div className="card_image"><img src={prizes.data[index].image_url} className="giftCards"/></div> <div className="card_content"> <h2 className="card_title">{prizes.data[index].prizeName}</h2> </div> </> ); }) } </div> </li> </ul> </div> ); }; export default Prizes;CertainPerformance tiene razón, debe ser setPrizeData(resp). Si obtienes PrizeData.map no es una función, entonces tal vez haya algún problema con la respuesta (resp).
¿Resp es solo una matriz? ¿Puedes imprimir el estado para ver lo que está almacenado en él?
Básicamente estás usando un accesorio como una matriz cuando haces esto:
setPrizeData([resp])Es por eso que solo obtiene un índice único porque lo está usando como una matriz.
En su lugar haz esto:
setPrizeData(resp);El error que estás recibiendo:
prizeData.map is not a functionLa API probablemente está devolviendo un objeto. Haga una solicitud CURL o algo así para ver cómo se ve su respuesta.
Si puede confirmar que realmente está obteniendo datos, intente algo como esto en su obtención de Axios:
.then(response => { setPrizeData(response.data); }) .catch(error => console.log(error));Además, aquí hay una plantilla que puede usar:
import React, { useEffect, useState } from "react"; import axios from "axios"; export default function App() { const [data, setData] = useState([]); const getData = async () => { const { data } = await axios.get(<yourapi endpoint>); setData(data); }; useEffect(() => { getData(); }, []); return <div>{JSON.stringify(data)}</div>; }