Entonces, recuperé datos en formato JSON usando la solicitud GET , entonces tengo un problema al guardar en mi state para poder mostrarlos en mi span / div / h1 usando map function . Así es como se ven mis datos JSON :
[ { "projectName": "SHIBA INU", "projectToken": "SHIB", "tokenPrice": 0.2, "saleStart":{ "$date": "2021-12-20T20:00:00.00Z" }, { "projectName": "BITCOIN", "projectToken": "BTC", "tokenPrice": 200, "saleStart":{ "$date": "2021-12-20T20:00:00.00Z" } ]Así que estoy tratando de hacerlo de esta manera, pero no creo que funcione:
const [projectData, setProjectData] = useState({}) useEffect(() => { axios.get(`my api`).then(res => { for(let i=0; i<res.data.length; i+1){ setProjectData(...projectData, res.data[i]) } }).catch(e => console.log("error: ", e)); },[]);No estoy seguro de si debo guardarlos en una matriz o en un objeto
Estoy de acuerdo con el comentario de @iLuvLogix: a partir de la información de su ejemplo, parece que está tratando de almacenar una matriz de objetos, por lo que querrá inicializar su estado con una matriz y luego agregar los elementos de la respuesta a la matriz también. Tampoco necesita el ciclo: puede distribuir todos los elementos de la matriz en una nueva matriz junto con el estado existente en un solo paso:
const [projectData, setProjectData] = useState([]); useEffect(() => { axios.get(`my api`).then(res => { setProjectData([...projectData, ...res.data]); }).catch(e => console.log("error: ", e)); }, []);En primer lugar, no está actualizando su valor i en su bucle for. Dado que su valor i nunca será menor que res.data.length, se repetirá infinitamente. En su lugar, debe usar i++ para incrementarlo en cada iteración:
for(let i=0; i<res.data.length; i++) Aparte de eso, establecer su estado de esa manera es problemático. setState en React es asíncrono, lo que significa que cuando lo usa y accede a su projectData , no le promete que obtendrá el estado actualizado de inmediato. En su lugar, debe intentar actualizar su estado de inmediato en su caso. También verifique ¿Por qué setState en reactjs Async en lugar de Sync?