即使資料沒有變化，useEffect也會多次渲染

如果依賴陣列為空，則此 useEffect 渲染一次，但如果我將 folderRef 放入依賴陣列中，則渲染多次。我只想在添加或洗掉某個檔案夾時渲染組件。請幫忙

  import React, { useState, useEffect , useRef } from "react";
import { db } from "../firebase";
import { collection, getDocs } from "firebase/firestore";
import FolderData from "./FolderData";

function ShowFolder(props) {
  const [folders, setFolders] = useState([]);
  const folderRef = useRef(collection(db, "folders"));

  useEffect(() => {
    const getData = async () => {
      const data = await getDocs(folderRef.current);
      const folderData = data.docs.map((doc) => {
        return { id: doc.id, data: doc.data() };
      });
      console.log(folderData);
      setFolders(folderData);
    };
    getData();
  }, [folderRef]);

  return (
    <div className="container md:px-4 mx-auto py-10">
      <div className="md:grid lg:grid-cols-6 md:grid-cols-3 mlg:grid-cols-3 md:gap-10 space-y-6 md:space-y-0 px-1 md:px-0 mx-auto">
        {folders.map((folder) => {
          return (
            <div key={folder.id}>
              {folder.data.userId === props.userId && (
                <div>
                  <FolderData key={folder.id} folder={folder} />
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default ShowFolder;

uj5u.com熱心網友回復：

您重新宣告folderRef每個渲染周期，因此如果您將其包含在useEffect鉤子的依賴陣列中，它將觸發渲染回圈。

如果你不指folderRef在組件其他地方然后將其移動到了useEffect鉤回呼洗掉它作為外部dependnecy。

const [folders, setFolders] = useState([]);

useEffect(() => {
  const folderRef = collection(db, "folders");

  const getData = async () => {
    const data = await getDocs(folderRef);
    const folderData = data.docs.map((doc) => {
      return { id: doc.id, data: doc.data() };
    });
    console.log(folderData);
    setFolders(folderData);
  };

  getData();
}, []);

或者將它存盤在 React ref 中，這樣它就可以安全地稱為穩定的參考。

const [folders, setFolders] = useState([]);
const folderRef = useRef(collection(db, "folders"));

useEffect(() => {
  const getData = async () => {
    const data = await getDocs(folderRef.current);
    const folderData = data.docs.map((doc) => {
      return { id: doc.id, data: doc.data() };
    });
    console.log(folderData);
    setFolders(folderData);
  };

  getData();
}, [folderRef]);

更新

我收集到您正在更新folders應用程式中其他地方的集合，并希望該組件“監聽”這些更改。為此，您可以實作一個onSnapshot偵聽器。

它可能類似于以下內容：

const [folders, setFolders] = useState([]);

useEffect(() => {
  const unsubscribe = onSnapshot(
    collection(db, "folders"),
    (snapshot) => {
      const folderData = [];
      snapshot.forEach((doc) => {
        folderData.push({
          id: doc.id,
          data: doc.data(),
        });
      });
      setFolders(folderData);
    },
  );

  // Return cleanup function to stop listening to changes
  // on component unmount
  return unsubscribe;
}, []);

uj5u.com熱心網友回復：

我想很可能你的 useState 函式就像

const[folderRef , setFolders]=useState(Your Initial Value);

如果是這種情況，那么當你執行

useEffect(() => {
setFolder(Setting Anything Here)

....


},[folderRef])

每次使用 setFolder 時，React 都會啟動一個無限回圈，FolderRef 會更新，并且 useEffect 會被迫再次運行并且不會停止。

使用類似的東西

const[folderRef , setFolders]=useState(Your Initial Value);
const[isLoading, setIsLoading]=useState(true);


useEffect(() => {
setFolder(Setting Anything Here)
setIsLoading(false)
....


},[])

...


return (
{ isLoading ? "Run the code you wanna run " : null  }
)

標籤：

上一篇：為什么每次功能部署都會復制所有GoogleCloudFunction源檔案？

下一篇：是否可以從https://firebasestorage.googleapis.com/指定影像請求的大小？