.map只返回数组React的最后一个元素

Question

我正在创建一个博客类型的应用程序与云firestore只是作为一个项目来学习一些东西。然而，我有一个问题，只有我的状态数组的最后一个元素，'blogs'，正在返回。map方法内部。

任何帮助这是赞赏的，谢谢!

const [blogs, setBlog] = useState([]);
const fetchBlogs = async () => {
const response = await getDocs(collection(db, "blog posts"));
let postArray = [];
response.docs.forEach((blogpost) => {
postArray.push(blogpost.data());
});
console.log(postArray)
postArray.forEach(post => {
setBlog([...blogs, post]);
});
}
useEffect(() => {
fetchBlogs();
}, []);
return (
<ul className="posts-container">
{ blogs.map((blog) => { 
console.log(blog); //this outputs each of the individual posts, but only the last is displayed as an <li>
return ( <li key={blog.title}>{blog.title}</li> )
})}
</ul>
)

Answer 1

您可能希望在不执行forEach()的情况下将响应放在您的状态

setBlog(postArray);

甚至

(取决于数据结构)

const [blogs, setBlog] = useState([]);
const fetchBlogs = async () => {
const response = await getDocs(collection(db, "blog posts"));
setBlog(response.data); // set to whatever you need
}
useEffect(() => {
fetchBlogs();
}, []);
return (
<ul className="posts-container">
{ blogs.map((blog) => { 
return <li>( <li key={blog.title}>{blog.title}</li> )
}
)}
</ul>
);

Answer 2

而不是:

postArray.forEach(post => {
setBlog([...blogs, post]);
});

试试这样做:

setBlog(postArray);

我不确定到底发生了什么，但这似乎是你的代码中最可疑的部分。

Answer 3

你重写了两次博客文章，试试这种方式

const fetchBlogs = async () => {
const response = await getDocs(collection(db, "blog posts"));
setBlog([...blogs, ...response.docs.map(blogpost => blogpost.data())])
}
useEffect(() => fetchBlogs(), []);