时间戳

首页 > 解决方案 > Reactjs没有在foreach循环中定义渲染视图

reactjs - Reactjs没有在foreach循环中定义渲染视图

问题描述

我正在从中获取数据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我得到了所有的价值

标签： reactjsloops

解决方案

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

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

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

推荐阅读