React 触发重新渲染

Question

我正在从 firestore 读取数据并在 UI 中显示它们。 它起初工作，然后我Failed to load resource: the server responded with a status of 429 () 。 我认为 react 正在触发重新渲染并不断从 firestore 查询数据。 我正在使用 useState 挂钩将数据分配给变量。 有人可以解释为什么我的代码会这样做吗？

import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
import { useState } from "react";

const firebaseConfig = {
  //firebase config
};
const app = initializeApp(firebaseConfig);

//Get firestore
const db = getFirestore(app);

//Function to read DB
async function getCollection(db, colName) {
  const dataCol = collection(db, colName);
  const dataSnapshot = await getDocs(dataCol);
  const DataList = dataSnapshot.docs.map(doc => doc.data());
  return DataList;
}

function App() {
  //Var to keep data
  const [data, setData] = useState([]);

  //Calling DB
  getCollection(db, 'SensorData')
    .then(obj => setData(obj))
    .catch(err => console.log(err))

  return (
    <div className="App">
      {/* Rendering Data */}
      {data.map((element) => 
                              <div>
                                <p>LDR : {element.LDR}</p>
                                <p>PIR : {element.PIR}</p>
                              </div>)
      }
    </div>
  );
}

export default App;

Answer 1

尝试使用空依赖项将getCollection放入useEffect中，以便它只在渲染时运行一个

useEffect(() => {
  getCollection(db, 'SensorData')
  .then(obj => setData(obj))
  .catch(err => console.log(err))
}, [])

Answer 2

如果您只想从商店中获取一次数据，请在 FC 的主体中使用 useEffect 而不是 Calling db

  useEffect(() => {
   getCollection(db, 'SensorData')
    .then(obj => setData(obj))
    .catch(err => console.log(err))
  },[])