estoy intentando modificar el estado de una variable users que almacena un array vacio cosa que cuando se renderice la vista se llame al metodo fetchData
y a traves de un forEach recorra el array que me retorna de la collection de firebase y pueda mostrar los nombres en la pagina, pero no se porque cuando se llama el metodo, es como si useEffect tomara el array vacio y colocara el primer elemento del array que me retorna y asi..
import logo from './logo.svg';
import './App.css';
import db from './config';
import { useState, useEffect } from 'react';
const App = () => {
const [users, setUsers] = useState([]);
const fetchData = async() => {
console.log('fetching ...');
const response = db.collection('users');
const data = await response.get();
let a = [];
data.docs.forEach((item) => {
a.push(item.data());
setUsers([...users, item.data()]);
});
}
useEffect(() => {
fetchData();
}, []);
return(
<div>
<h4>users:</h4>
{users && users.map((usr, ix) => {
return(
<p key={ix}>name: {usr.age}</p>
)
})}
</div>
);
}
export default App;
Adjunto imagen:
Como se ve en la imagen, siempre alimenta el array de la variable users con el mismo objeto cada vez que hay un cambio en la vista, y no actualiza de una fetchData()
el estado de la variable users
forEach
. Me parece que de esa forma seteas el estado varias veces de forma innecesaria. ¿No sería mejor hacerlo afuera delforEach
? Creo que podrías simplemente setearlo solo una vez afuera delforEach
con los datos dela
al que le venís haciendo.push
así:setUsers(a)
.