React使用forEach循环渲染Firebase数据时视图不显示问题

问题根因 #

• 你在JSX中使用了forEach遍历数组：forEach方法本身没有返回值，执行后返回undefined，所以React没有拿到需要渲染的元素内容。你能在控制台看到打印是因为循环体内的console.log正常执行了，但你return的JSX元素没有被收集返回给React渲染。

修复方案 #

1. 将遍历方法从forEach替换为map：map会遍历数组并返回一个由每一项return值组成的新数组，React可以直接渲染这个包含JSX元素的数组
2. 注意要给遍历返回的根元素添加唯一key属性，避免React抛出列表渲染警告，优先用任务数据的唯一id作为key，无唯一id时可临时用索引index代替
3. 可选优化：目前你在嵌套循环内多次调用setTasks，会触发组件多次重渲染，建议先收集所有要新增的任务数据，再一次性更新state，减少不必要的性能消耗

修改后的代码 #

import React, { useState, useEffect, Fragment } from 'react';
import { ref, onValue } from "firebase/database";

function App() {
  const regRef = ref(database, "Tasks/");
  const [tasks, setTasks] = useState([{ title: "Task List" }]);

  useEffect(() => {
    onValue(regRef, (snapshot) => {
      // 先收集所有任务数据，一次性更新，减少重渲染次数
      const newTasks = [];
      snapshot.forEach((childSnapshot) => {
        childSnapshot.forEach((task) => {
          newTasks.push(task.val());
        });
      });
      setTasks(oldTasks => [...oldTasks, ...newTasks]);
    });
  }, []);

  return (
    <div className="App">
      <div>Rendering data</div>
      {/* 替换forEach为map，添加key属性 */}
      {tasks.map(function (task, index) {
        console.log("rendering value: " + task.title);
        return (
          <Fragment key={task.id || index}>
            <h2>{task.title}</h2>
            <h4>{task.description}</h4>
          </Fragment>
        );
      })}
    </div>
  );
}

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