如何在reactjs中从firebase数据库中获取数据而不重新加载页面

Question

我已经配置了firebase设置，下面是我的一段代码:

const [PostList, SetPostList] = useState([])
const db = getFirestore(firebaseConfig)
const q = query(collection(db, "posts"))
const querySnapshot = getDocs(q)
useEffect(()=>{
querySnapshot.then(data=> data.forEach(post => {
SetPostList([post.data()])
console.log(PostList)
}))
}, [])

Answer 1

应该在循环外调用SetPostList:

useEffect(() => {
let result = [];
querySnapshot.then((data) => {
data.forEach((post) => {
result.push(post.data());
console.log(PostList);
});
SetPostList(result);
});
}, []);

Answer 2

我找到了答案:

const db = getFirestore(firebaseConfig)
const q = query(collection(db, "posts"));
const unsubscribe = onSnapshot(q, querySnapshot => {
const cities = [];
querySnapshot.forEach((doc) => {
cities.push(doc.data());
});
SetPostList(cities)

});