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 !