react firebase firestore empty useEffect useState

Question

有一个问题，当导航到comp的项目状态是空的，如果我编辑代码和页面刷新它显示，如果我添加状态到useEffect "[itemCollectionRef, items]"这是一个inf循环，但数据是他们的谁有更好的想法或方法来获取数据显示从firestore。

import React, { useState, useEffect } from "react";
import { Grid, Box, Button, Space } from "@mantine/core";
import { ItemBadge } from "../../components/NFAItemBadge";
import { useNavigate } from "react-router-dom";
import { db, auth } from "../../firebase";
import { getFirestore, query, getDocs, collection, where, addDoc } from "firebase/firestore";
import { useAuthState } from "react-firebase-hooks/auth";

const ItemTrack = () => {
const [user, loading, error] = useAuthState(auth);
const navigate = useNavigate();
const [items, setItems] = useState([]);
const itemCollectionRef = collection(db, "items");
useEffect(() => {
//if(!user) return navigate('/');
//if(loading) return;
const q = query(itemCollectionRef, where("uid", "==", user.uid));
const getItems = async () => {
const data = await getDocs(q);
setItems(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
console.log("Fetched Items: ", items);
};
getItems();
}, []);
if (loading) {
return (
<div>
<p>Initialising User....</p>
</div>
);
}
if (error) {
return (
<div>
<p>Error: {error}</p>
</div>
);
}
if (user) {
return (
<Box sx={{ maxWidth: 1000 }} mx="auto">
</Box>
);
} else {
return navigate("/");
}
};
export default ItemTrack;

Answer 1

这取决于您将如何呈现来自useEffect的数据。setState不直接对状态对象进行更改。它只是为React core创建队列来更新React组件的状态对象。如果您将状态添加到useEffect中，它将比较两个对象，并且由于它们具有不同的引用，它将再次获取项目并将新项目对象设置为状态。然后状态更新触发组件中的重新呈现。等等，等等，等等……

如上所述，这取决于您希望如何显示数据。如果你只想把你的数据记录到控制台，那么你必须使用一个临时变量，而不是使用setState:

useEffect(() => {
const newItems = data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
console.log(newItems)
// setItems(newItems)
}, [])

你也可以使用多个useEffect来获取更新后的状态对象:

useEffect(() => {
setItems(data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))) 
}, [])
useEffect(() => { console.log(items) }, [items])

如果你现在想要将它呈现给组件，那么你必须调用组件中的状态并将数据映射到它。看一下下面的示例代码:

useEffect(() => {
const q = query(itemCollectionRef, where("uid", "==", user.uid));
const getItems = async () => {
const data = await getDocs(q);
setItems(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
getItems();
}, []);
return (
<div>
<p>SomeData: <p/>
{items.map((item) => (
<p key={item.id}>{item.fieldname}</p>
))}
</div>
);