如何在React JS中从Firebase实时数据库获取数据并解决代码运行报错

• 核心错误1：Firebase的once方法是异步操作，你在外层同步执行setRenderData(classStudents)时，所有嵌套的异步查询还未执行完成，此时classStudents是空数组或数据不完整，这是最直接的报错/数据异常原因。
• 核心错误2：遍历班级节点的快照时，错误使用snapsh.val()作为学生节点名拼接查询路径，实际学生节点的名称对应快照的key属性，val()返回的是该学生节点下的所有子数据。
• 冗余问题：代码多次发起重复的数据库请求，实际上拿到初始的班级根节点快照后，就可以直接逐层遍历所有子节点数据，无需额外发起查询请求，能大幅提升性能。

// 封装为async函数处理异步时序问题
const fetchClassData = async () => {
  // 只发起一次请求获取班级下全量数据
  const classSnapshot = await fire.database().ref(outputClassName).once("value");
  const classStudents = [];

  // 遍历所有学生节点
  classSnapshot.forEach(studentSnap => {
    const studentSubjects = [];
    // 遍历当前学生下的所有科目节点
    studentSnap.forEach(subjectSnap => {
      const subjectNotes = [];
      // 遍历当前科目下的所有笔记
      subjectSnap.forEach(noteSnap => {
        subjectNotes.push(noteSnap.val());
      });
      studentSubjects.push(subjectNotes);
    });
    classStudents.push(studentSubjects);
  });

  // 所有数据遍历完成后再更新状态
  setRenderData(classStudents);
}

// 调用函数执行数据拉取
fetchClassData();

如果你有特殊需求必须保留分次请求的逻辑，需要用Promise.all收集所有异步请求的Promise实例，等所有请求都返回结果之后再执行状态更新操作，避免异步时序导致的数据异常。

内容的提问来源于stack exchange，提问作者anonymous