I want to get data from firebase real time database and push it in a react array but the snapshot does not end and loops forever
Here is a link for better understanding. The loop should stop after the first iteration: link
full code
function About() { let params = useParams(); const [title, setTitle] = useState('') const group = [] const [theArray, setTheArray] = useState([]); const [myArray, setMyArray] = useState([]); onAuthStateChanged(auth, (user) => { const uid = ''; var data_list = [] const db = getDatabase(app) const dbRef = ref(getDatabase(app)); const sth = params.hey useEffect({ get(child(dbRef, `users/${uid}/${params.hey}`)).then((snapshot) => { if (snapshot.exists()) { console.log('exists') var snap = snapshot.val() var rows = snap['rows'] rows.forEach(element => { console.log('element', element) setMyArray(arr => [...arr, `${arr.length}`]); }); } else { } } ).catch((error) => { }) }, []); }); console.log('group', group) return ( <> <main> <h2>{title}</h2> <div>{myArray.map( e => <div>{ e }</div> )} </div> </main> </> ); }
Advertisement
Answer
Calling get
retrieves a result only once, so if you get an endless loop it’s because the code you shared is being invoked multiple times.
It’s hard to say without seeing the context of where this code runs, but most like you have this in the top-level of your component, and you should put it in a useEffect
with a dependency array (typically empty).
useEffect(() => { ... load from database here }, []); // empty array = no dependencies, so it runs only once