React项目中.map遍历状态数组仅返回最后一个元素的问题求助

问题根源 #

代码的问题出在循环调用状态更新函数setBlog的逻辑：React的状态更新在同一次事件循环中是批处理的，且你代码中循环内的setBlog([...blogs, post])始终捕获的是fetchBlogs执行时的初始空数组blogs，前几次的更新会被最后一次覆盖，最终状态数组仅保留最后一个元素。

修复方案 #

方案1（推荐）：一次性更新状态

你已经提前把所有博客数据存入了postArray，直接将整个数组一次性传入setBlog即可，无需循环调用状态更新函数：

// 替换原有循环setBlog的代码
setBlog(postArray)

方案2：使用函数式状态更新

如果确实有逐个追加元素的需求，使用setBlog的函数式更新语法，每次基于最新的状态值扩展数组：

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

优化后的完整代码 #

const [blogs, setBlog] = useState([]);
const fetchBlogs = async () => {
    const response = await getDocs(collection(db, "blog posts"));
    // 直接用map生成数据数组，简化原forEach+push的逻辑
    const postArray = response.docs.map(blogpost => blogpost.data());
    setBlog(postArray);
}
useEffect(() => {
    fetchBlogs();
}, []);

return (
    <ul className="posts-container">
       { blogs.map((blog) => { 
           return ( <li key={blog.title}>{blog.title}</li> )
        })}
    </ul>
)

内容的提问来源于stack exchange，提问作者adjash