Ionic React + FIrebase. When updating a data in firebase. Loop items are populated twice

Question

I have a function that gets all the data in firebase realtime database and putting it inside an array in order to map in react. But when I do an update,add. It just doubles the list but when i switch to other tabs and go back again, It will return the original data with the correct number of items in it. Can someone tell me what did I do wrong about this?

Here is my data when I enter the component

When I do an update in firebase here is the result, Also the UI isnt updated sometimes. I need to switch tabs in order to make the changes happen.

Here is my code in retrieving data and the loop.

const [doctors, setDoctor] = React.useState([]);

  useEffect( () => {
    console.log('Enter')
    let newArr = []
    firebase.database().ref('users').orderByChild('type').equalTo('doctor').on('value',(snapshot)=>{
      let key;
      snapshot.forEach( (childSnap) => {
        key = childSnap.key
        const snapVal = snapshot.val();
        newArr.push(snapVal[key])
      })
        setDoctor(newArr)
    })

  }, [])

In the loop:

      <IonList>
          {doctors.map((elem, index) => {
            // index has to come from the second parameter from map
             console.log(doctors)
            return (
              <IonItem key={index}>
                <IonLabel>
                  <IonText className="font-weight: bold;">
                    <h3>{elem["name"]}</h3>
                  </IonText>
                  <h4>{elem["speciality"]}</h4>
                  <h4>{elem["email"]}</h4>
                </IonLabel>
                <br></br>
              </IonItem>
            );
          })}
        </IonList>

Have you tried declaring the newArr variable outside of useEffect function? — Yousuf
– Yousuf, Commented Aug 14, 2020 at 13:55
i tried it but it outputs the same result @gourabyousufbasir — draw134
– draw134, Commented Aug 14, 2020 at 14:01

Frank van Puffelen · Accepted Answer · 2020-08-14 14:02:05Z

2

When the data changes, your on() callback is called again with a complete snapshot of the data for the query. Since you declare `` outside of the callback, you end up adding the new data after the previous data, which is why you see both sets of data in your UI.

The solution is to always start with a new array:

  useEffect( () => {
    console.log('Enter')
    firebase.database().ref('users').orderByChild('type').equalTo('doctor').on('value',(snapshot)=>{
      let key;
      let newArr = []
      snapshot.forEach( (childSnap) => {
        key = childSnap.key
        const snapVal = snapshot.val();
        newArr.push(snapVal[key])
      })
      setDoctor(newArr)
    })
  }, [])

answered Aug 14, 2020 at 14:02

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

draw134 Over a year ago

thanks for the answer sir. now it worked and the UI updates real time. Thanks a lot for this sir.

Collectives™ on Stack Overflow

Ionic React + FIrebase. When updating a data in firebase. Loop items are populated twice

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related