你重新声明folderRef
每个渲染周期,所以如果你将它包含在useEffect
hook 的依赖数组它将触发渲染循环。
如果你不参考folderRef
组件中的任何其他位置,然后将其移动into the useEffect
挂钩回调以将其作为外部依赖项删除。
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]);
Update
我了解到您正在更新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;
}, []);