En mi aplicación de reacción, estoy recuperando algunos datos de firebase, pero cuando trato de almacenar los elementos en mi estado, solo almacena el primer elemento de las promesas cumplidas,
const HomePage = (props) => { const [events ,setEvents] = React.useState([]) const fetchGames=async()=>{ const DB =await db.collection('game').get() DB.docs.forEach(item=>{ setEvents([...events,item.data()]) console.log(item.data()); // Here shows all the items that stored in my firebase collection }) } useEffect(()=> { fetchGames() }, []) return( <div> { events.map((event)=> ( <div> {event.home_color} </div> ) ) } </div> )Eventualmente, el estado de los eventos mostrará solo un elemento, a diferencia del registro de la consola que muestra todos los elementos, ¿cómo solucionar esto?
El estado de reacción no es synchronous . Por lo tanto, actualizar el estado en un bucle for no garantiza que en cada iteración obtenga un estado actualizado.
Puede preparar el objeto final en el forEach y luego actualizar una vez que haya terminado. Algo como -
const fetchGames=async()=>{ const DB =await db.collection('game').get() const eventsFromDb = []; DB.docs.forEach(item=>{ // update eventsFromDb array here }) // set state here setEvents(eventsFromDb); }Llamar repetidamente a setEvents en su ciclo forEach no permite que el estado se actualice realmente porque el enlace useState de React no es sincrónico.
Podrías hacer algo como esto:
setEvents([ ...events, ...DB.docs.map(item => item.data())]) Asumiendo que el método data() no es asíncrono, lo siento, no conozco Firebase.