Javascript Firebase onSnapShot一直在呼叫

我是新手。使用firebase处理ToDo应用程序

import React, { useState, useEffect } from "react";
import "./App.css";
import ToDoInput from "./ToDoInput";
import db from "./firebase";
import ToDoItem from "./ToDoItem";

function App() {
  const [toDos, setToDos] = useState([{ id: 1, task: "asd", status: false }]);
  useEffect(() => {
    console.log("User effect");
    db.collection("ToDo")
      .orderBy("createdAt")
      .onSnapshot((snapshot) => {
        setToDos(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            task: doc.data().task,
            createdAt: doc.data().createdAt,
            status: doc.data().status,
          }))
        );
      });
  });
  return (
    <div className="app">
      <ToDoInput />
      {toDos.map((toDo) => (
        <ToDoItem
          key={toDo.id}
          task={toDo.task}
          createdAt={toDo.createdAt}
          status={toDo.status}
        />
      ))}
    </div>
  );
}

export default App;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
从“/ToDoInput”导入ToDoInput；
从“/firebase”导入数据库；
从“/ToDoItem”导入ToDoItem；
函数App（）{
const[toDos，setToDos]=useState（[{id:1，任务：“asd”，状态：false}]）；
useffect（（）=>{
console.log（“用户效果”）；
数据库收集（“待办事项”）
.orderBy（“创建数据”）
.onSnapshot（（快照）=>{
塞托多斯(
snapshot.docs.map（（doc）=>({
id:doc.id，
任务：doc.data（）.task，
createdAt:doc.data（）.createdAt，
状态：doc.data（）.status，
}))
);
});
});
返回(
{toDo.map（（toDo）=>(
))}
);
}
导出默认应用程序；

在上面的代码中，onSnapshot函数不断触发相同的数据，并且UI处于不断呈现状态

---

您需要在

useffect

中传递一个空数组参数。这样，该函数将仅在组件上第一次调用。您的代码将在组件上运行，并且每次状态更改时都会运行。由于您正在

useffect

中更改状态，因此您陷入了一个循环中

这样做：

useEffect(() => {
    console.log("User effect");
    db.collection("ToDo")
      .orderBy("createdAt")
      .onSnapshot((snapshot) => {
        setToDos(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            task: doc.data().task,
            createdAt: doc.data().createdAt,
            status: doc.data().status,
          }))
        );
      });
  }, []); 

阅读更多关于它的信息