javascript - 离子反应 + FIrebase。更新 firebase 中的数据时。循环项目被填充两次

Question

我有一个函数可以获取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>

标签： javascriptreactjsfirebaseionic-frameworkfirebase-realtime-database

Answer 1

当数据更改时，将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)
    })
  }, [])