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))
  },[])