1

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:

introducir la descripción de la imagen aquí

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

3
  • No entiendo porqué la necesidad de setear el estado dentro del forEach. Me parece que de esa forma seteas el estado varias veces de forma innecesaria. ¿No sería mejor hacerlo afuera del forEach? Creo que podrías simplemente setearlo solo una vez afuera del forEach con los datos del a al que le venís haciendo .push así: setUsers(a). el 30 may. 2021 a las 5:50
  • Lo que podria hacer es tomar el array de objetos que me llega de la peticion y almacenarlo en a como a = [...a, arrayLLegado], a eso te refieres?.
    – Richi
    el 31 may. 2021 a las 18:02
  • Ahí lo agregué como una respuesta. Así lo puedo explicar mejor. el 1 jun. 2021 a las 4:14

2 respuestas 2

0

Al final termine usando un componente de clase, la verdad con hooks me dio mas problemas que certezas jaja

import logo from './logo.svg';
import './App.css';

import db from './config';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []
    }
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async() => {
  
    const response = db.collection('users');
    const data = await response.get();
    data.docs.forEach((item) => {
      this.setState({
        users: this.state.users.concat(item.data())
      })
    });
  }

  render(){
    const { users } = this.state;
    return(
      users.map((usr) => {
        return(
          <p>{usr.name}</p>
        )
      })
    )
  }
}
export default App;
1
  • aun así, voy a darle importancia resolviendo tu componente funcional
    – Enzo
    el 30 may. 2021 a las 1:39
0

Suponiendo que la respuesta de la base de datos es un array, mi propuesta para resolver este problema es la siguiente:

En el fetchData cambiamos la manera de pasar al estado los datos de la consulta.

No seteamos el estado por cada vez que se itera el forEach, si no más bien hacemos un .push en el nuevo array llamado a por cada elemento.

Luego de rellenar ese array, fuera del forEach, recién ahí seteamos el estado haciendo setUsers(a).

Al actualizar el estado, yo no veo la necesidad de poner el a dentro de otro array porque a ya es un array. Tampoco termino de entender el motivo de usar algo como ...a en este caso, y sospecho que eso es lo que genera el error.

Con esos cambios, fetchData quedaría así:

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(a);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.