Tengo este componente en reacción que hace todo desde firebase, construye una matriz y establece un estado, pero cuando renderizo el componente solo puedo ver los elementos la primera vez, si vuelvo a cargar la página, el estado parece estar vacío.
import React, { PureComponent } from 'react'; import firebase from 'firebase' class Charts extends PureComponent { constructor(props) { super(props); this.state = { data: [] }; this.todoRef = firebase.database().ref('Todo'); } componentDidMount = () => { var data = []; this.todoRef.on('value', (snapshot) => { const todos = snapshot.val(); for (let id in todos) { data.push({ id, ...todos[id] }); } }); this.setState({ data: data }) } render() { return <div> {this.state.data.map(item => ( <p>{item.name}</p> ))} </div> } } export default Charts;Si uso el registro de la consola, obtengo una matriz (0) con elementos dentro. He intentado ubicar setState en diferentes métodos de ciclos de vida, pero parece que no funciona.
Está llamando a this.setState fuera del controlador de instantáneas, por lo que solo está pasando la matriz de data vacía ( [] ) al actualizador de estado.
Debe mover la actualización de estado a la función que procesa la instantánea.
componentDidMount = () => { const data = []; this.todoRef.on('value', (snapshot) => { const todos = snapshot.val(); for (let id in todos) { data.push({ id, ...todos[id] }); } this.setState({ data }); }); }