forEach 循环返回值，但我的 React useState 值仅返回一个数组 obj

Question

const user = useSelector((state) => state.user);
const [allPost, setAllPost] = useState([]);

const getAllPost = async () => {
  const q = query(collection(db, "posts", "post", user.user.email));
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    console.log(doc.data());
    const newPost = doc.data();
    setAllPost([...allPost, newPost]);
  });
};

useEffect(() => {
  getAllPost();
}, []);

我的 firestore 中有四个文档，但 setState 仅返回一个文档，尽管使用 forEach 循环我可以看到所有四个对象

Answer 1

问题是每次你使用

setAllPost([...allPost, newPost]);

allPost仍然是之前的值，因为状态值更新是异步的；allPost在下一次渲染之前不会包含新值。

您可以使用状态设置器的功能版本......

querySnapshot.forEach((doc) => {
  setAllPost((prev) => [...prev, doc.data()]);
});

或者简单地建立一个单独的数组并一次设置它们

setAllPost(querySnapshot.docs.map(doc => doc.data()));

就我个人而言，我更喜欢后者。