离子反应+ FIrebase在Firebase中更新数据时循环项被填充两次

问题描述

我有一个函数可以获取Firebase实时数据库中的所有数据，并将其放入数组中以进行映射。但是当我进行更新时，添加。它只是列表的两倍，但是当我切换到其他选项卡并再次返回时，它将返回原始数据，其中包含正确的项目数。有人可以告诉我我做错了什么吗？

这是我输入组件时的数据

当我在firebase中进行更新时，这是结果，有时UI也不会更新。我需要切换标签才能进行更改。

这是我检索数据和循环的代码。

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

  },[])

在循环中：

      <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>

解决方法

当数据更改时，将再次调用on()回调，并提供查询数据的完整快照。由于您在回调之外声明了``，因此最终将新数据添加到之前的数据之后，这就是为什么您在UI中看到两组数据的原因。

解决方案是始终以新数组开头：

  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)
    })
  },[])