如何在 React JS 中從 firebase 實時數據庫中獲取數據

Question

我正在嘗試從 React 中的 Firebase 獲取數據。 我的數據結構如下：

我的代碼目前看起來像這樣：

fire.database().ref(outputClassName).once("value", snapshot => {
      let classStudents = [];
      snapshot.forEach(snapsh => {
        //classStudents.push(snapsh.val());
        let student = "";
        student = snapsh.val();
        alert(student);
        fire.database().ref(outputClassName).child(student).once("value", snapsho => {
          let studentSubjects = [];
          snapsho.forEach(snaps => {
            //studentSubjects.push(snaps.val());

            fire.database().ref(outputClassName).child(student).child(snaps.val()).once("value", snapsh => {
              let subjectNotes = [];
              snapsh.forEach(snap => {

                subjectNotes.push(snap.val());

              });

              studentSubjects.push(subjectNotes);

            });
          });

          classStudents.push(studentSubjects);

        });

      });
      setRenderData(classStudents);
    });

我收到此代碼的錯誤。 有人可以幫我解決問題嗎？

Answer 1

當數據只需要獲取一次時，你應該使用.once()而不是.on() 。 此外，當您在路徑/10 A獲取數據時，它將獲取完整的節點，因此您不必再次請求該 class 中每個學生的數據。

function outputData() {
    fire.database().ref(outputClassName).once("value").then((snapshot) => {
      const classData = snapshot.val()
      const students = Object.keys(classData)

      students.forEach((student, i) => {
        const subjects = Object.keys(classData[student])
        console.log(`${i+1} Name: ${student}`)
        console.log(`Subjects: ${JSON.stringify(subjects)}`)
        console.log("===")

        // render the data to HTML as per needs
      })
    })
}