He venido con un problema en mi proyecto. Quería escribir datos desde firebase, funciona pero los elementos se multiplican.
Debajo del código que escribe datos: Aquí hay una foto de los elementos que se muestran.
const db = getDatabase(); const starCountRef = ref(db, `/Animals`); onValue(starCountRef, (snapshot) => { let data = snapshot.exportVal(); Object.keys(data).forEach((id) => { animals.push(data[id]) }) });Y el resto del código:
return ( <> <div className="adoption-cards container"> <ul className="cards-list"> { Object.keys(animals).map((id) => { return ( <li key={animals[id].id} className="card-item"> <div className="card"> <div className="photo-container"> <img src={animals[id].photo} alt="animal" className="animal-photo"/> </div> <div className="animal-info"> <p> <span>Imię:</span>{animals[id].name} </p> <p> <span>Gatunek:</span>{animals[id].type} </p> <p> <span>Płeć:</span>{animals[id].sex} </p> <p> <span>Wiek:</span>{animals[id].age} </p> </div> <div className="animal-description"> <p className="description-title">Opis:</p> <p className="animal-story">{animals[id].story}</p> <button className="adopt-btn">Adoptuj</button> </div> </div> </li> ) }) } </ul> </div> </> ); };Lo más probable es que esto suceda cuando hay un cambio en los datos de la base de datos.
Cuando usa onValue , se llamará inmediatamente a su devolución de llamada con el valor actual de la base de datos y luego se volverá a llamar cada vez que los datos cambien con una instantánea actualizada de los datos. Dado que agrega datos a los animals cada vez, la segunda vez está volviendo a agregar una gran cantidad de datos.
Si solo desea obtener los datos una vez, use get en lugar de onSnapshot :
const db = getDatabase(); const starCountRef = ref(db, `/Animals`); get(starCountRef).then((snapshot) => { // 👈 ... }); Si desea escuchar los cambios, borre la matriz de animals cuando obtenga una actualización de los datos:
const db = getDatabase(); const starCountRef = ref(db, `/Animals`); onValue(starCountRef, (snapshot) => { animals = []; // 👈 ... });Sin relación, esta es la forma más idiomática de obtener los datos de una instantánea de Firebase:
snapshot.forEach((child) => { animals.push(child.val()) })