4

estoy aprendiendo React y aun tengo algo verde el tema de las consultas con firebase y tengo algunas dudas relacionadas con esto.

Tengo el siguiente codigo actualmente :

const Tactive = () => {
var keys = [];
var childData = [];
const[data2,setData2] = useState([]);
const[data3,setData3] = useState([]);
var query = fire.database().ref('Torneos').orderByKey();
query.once("value")
    .then((snapshot) => {
        if(snapshot.exists()){
        snapshot.forEach( childSnapshot => {
             keys.push(childSnapshot.key);
             childData.push(childSnapshot.val());

        });
        setData2([...childData]);
        setData3([...keys])
    } else {
    console.log("No data available");
}
}).catch((error) => {
console.error(error);
});

Esto me devuelve los distintos campos de cada objeto de la tabla "Torneos" , por ejemplo el nombre del torneo, su descripción, etc..

Y en esta tabla lo muestro todo :

     return (
    <div>
        <h1>Torneos activos</h1>

        <div className="App">
            <Table striped bordered hover variant="dark">
                <thead>
                <tr>
                    <th>IdTorneo</th>
                    <th>Banner</th>
                    <th>Nombre</th>
                    <th>Fecha</th>
                    <th>Descripción</th>
                    <th>Ganador</th>
                    <th>Juego</th>
                    <th>Nº Maximo de equipos</th>
                    <th>Jugadores por equipo</th>
                    <th>Plataforma</th>
                </tr>
                </thead>
                <tbody>
                {data2.map((childData) => {
                            return (
                                <tr key={childData.date}>
                                    <td>{childData.id}</td>
                                    <td>{childData.banner}</td>
                                    <td>{childData.nombre}</td>
                                    <td>{childData.fecha}</td>
                                    <td>{childData.descripcion}</td>
                                    <td>{childData.idWinner}</td>
                                    <td>{childData.juego}</td>
                                    <td>{childData.nequipos}</td>
                                    <td>{childData.playersEquipo}</td>
                                    <td>{childData.plataforma}</td>
                                    <Button variant="info">Modificar</Button>
                                    <Button variant="warning">Eliminar</Button>
                                </tr>
                            );
                })}
                </tbody>
            </Table>
        </div>
    </div>

);

El problema es , que esto me muestra correctamente todo, pero pasados unos segundos la página se bloquea y se cierra. He descubierto metiendo console.log() dentro del foreach y de la consulta , que nunca deja de acumular registros en consola de llamada a console.log y creo que puede ser por esto

Muchas gracias !

1 respuesta 1

1

He descubierto metiendo console.log() dentro del foreach y de la consulta , que nunca deja de acumular registros en consola de llamada a console.log y creo que puede ser por esto

Parece ser, que no se esta controlando el número de devoluciones (re-renders) para la secuencia asincrónica firebase-ReactJS involucrada.

Se puede intentar lo siguiente:

    const Tactive = () => {
    
        const[data2,setData2] = useState([]);
        const[data3,setData3] = useState([]);
        useEffect(()=>{
            var keys = [];
            var childData = [];
            var query = fire.database().ref('Torneos').orderByKey();
            //Inicio de la secuencia async firebase
            query.once("value")
            .then((snapshot) => {
                if(snapshot.exists()){
                    snapshot.forEach( childSnapshot => {
                        keys.push(childSnapshot.key);
                        childData.push(childSnapshot.val());
                    });
                    //secuencia async ReactJS
                    setData2([...childData]);
                    setData3([...keys])
                } else {
                    console.log("No data available");
                }
           }).catch((error) => {
                console.error(error);
           });
        }, []);

    //demas código
    //return ...
    }

Toda la operacion asincrónica firebase se envuelve en un hook useEffect, se controla el número de devoluciones del componente para cada llamada a los setters (setData2, setData3) de useState.

Esa pieza de código no parece necesitar dependencias, así que se pasa un array vacío como segundo argumento para useEffect. Con esta configuración, la pieza de código dentro de useEffect solo se ejecutará una vez que este montado el componente Tactive.

Tu Respuesta

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

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