editar : descubrí que llamar a console.log inmediatamente no muestra los resultados deseados porque setstate es asíncrono, pero no entiendo por qué los accesorios que estoy usando no se procesan correctamente. Se representan tres divs, uno para cada objeto en la matriz, pero el texto no sigue.
Recientemente he estado trabajando en un proyecto de reacción en el que busco varios repositorios de github a través de la API de github, y me encontré con un problema cuando se recuperan los datos y la respuesta se convierte en un objeto javascript con .json(). Cuando registro el retorno de response.json(), devuelve la información que quiero, pero cuando registro mi matriz de estado, vuelve vacío.
componentDidMount() { var urls = [ 'https://api.github.com/repos/random/proj', 'https://api.github.com/repos/random/proj2', 'https://api.github.com/repos/random/proj3' ]; const requests = urls.map((url) => fetch(url)) Promise.all(requests) .then((resps) => resps.map((response) => response.json())) .then((jsons) => console.log(jsons)) //this logs 3 objects in array (only present for example) .then((jsons) => { const fetchedProjs = jsons; this.setState({ projects: fetchedProjs, DataFetched: true }) }) .then(console.log(this.state.projects)) //this logs 0 objects in array }my render() muestra el contorno con estilo de tres divs, pero la matriz registrada en la consola muestra una longitud de 0.
if (!this.state.DataFetched) { return ( <h2>Loading...</h2> ) } return( <> {this.state.projects.map((project, i) => ( <div className="row project" key={`${i}`}> <div className="card"> <h2>{project.name}</h2> <p>{project.description}</p> </div> </div>Soy muy nuevo para reaccionar y he tratado de resolverlo lo mejor que puedo, ¡pero obviamente hay algo que me estoy perdiendo!
edit2 código actualizado:
const requests = urls.map((url) => fetch(url)) Promise.all(requests) .then((resps) => resps.map((response) => response.json())) .then((jsons) => { const fetchedProjs = jsons; this.setState({ projects: fetchedProjs, DataFetched: true }) })Muy bien, eso me da algo de claridad, cuando registro el valor en render() me da la matriz con tres objetos, pero todavía no entiendo por qué aparecen los tres divs pero el texto que estoy pasando no lo hace.
Pruebe console.log ing la variable del project desde el interior de su map y vea si está tomando la tecla correcta del objeto.
Cuando trato de ejecutar su código, por cierto, obtengo 404 para esas URL, por lo que asumo que esto es solo para fines de prueba, por lo que me hace pensar que está obteniendo la cantidad correcta de objetos de respuesta en una matriz, pero es posible que no obtenga los valores correctamente de ellos.
<div className="row project" key={`${i}`}>Esto también puede ser simplemente
<div className="row project" key={i}> pero, en general, no es una buena práctica usar el valor iteraror como clave, ¿así que tal vez el objeto de su project tenga una id ? Ese sería un buen valor para las claves: es único, consistente y predecible.