I've come with problem on my project. I wanted to write data from firebase, it works but the elements are multiplied.

Below the code that writes data:Here is a photo of elements displaying.

const db = getDatabase();
const starCountRef = ref(db, `/Animals`);
onValue(starCountRef, (snapshot) => {
    let data = snapshot.exportVal();

    Object.keys(data).forEach((id) => {
        animals.push(data[id])
    })    
});

And the rest of the code:

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>
        </>
    );
};

CodePudding user response：

Most likely this happens when there is a change in the data from the database.

When you use onValue, you callback will immediately get called with the current value from the database, and then again be called every time the data changes with an updated snapshot of the data. Since you add data to animals each time, the second time you're re-adding a lot of data.

If you only want to get the data once, use get instead of onSnapshot:

const db = getDatabase();
const starCountRef = ref(db, `/Animals`);
get(starCountRef).then((snapshot) => {  //