Reactjs没有在foreach循环中定义渲染视图答案

【问题标题】：Reactjs not Rendering view define in foreach loopReactjs没有在foreach循环中定义渲染视图
【发布时间】：2021-10-10 06:19:33
【问题描述】：

我正在从firebase 获取数据并使用useState 设置数据，但是当我在组件中循环时返回没有查看循环中的任何内容。这是我的代码。

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

useEffect(() => {
onValue(regRef, (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    childSnapshot.forEach((task) => {
      setTasks((oldTasks) => [...oldTasks, task.val()]);
    });
  });
});
}, []);

return (
<div className="App">
  <div>Rendering data</div>
  {tasks.forEach(function (task) {
    console.log("rendering value: " + task.title);
    return (
      <>
        <h2>{task.title}</h2>
        <h4>{task.description}</h4>
      </>
    );
  })}
</div>
);
}

在这个视图中，只有Rendering data div，但在console log我得到了所有的值

【问题讨论】：

标签： reactjs loops

【解决方案1】：

问题 forEach 只是迭代它不返回任何内容的数组。这就是为什么你什么都看不到的原因。因为它不返回任何东西

解决试试这个。因为map 返回一个数组。

{tasks.map(function (task) {
  console.log("rendering value: " + task.title);
  return (
    <>
      <h2>{task.title}</h2>
      <h4>{task.description}</h4>
    </>
  );
})}

【讨论】：

是的，明白了，谢谢