如何在 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 处获取数据时，它将获取完整的节点，因此您不必再次请求该班级中每个学生的数据。

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