MERN博客实现最新帖子优先展示的方法

要让最新发布的帖子显示在顶部，有两种实用解决方案，按需选择即可：

方案一：前端反转数据数组 #

如果后端暂时无法调整返回数据的顺序，可以在前端获取数据后，复制并反转数组再存入状态（直接调用reverse()会修改原数组，建议先复制避免副作用）：

修改你的fetchPosts函数：

const fetchPosts = async () => {
  const res = await axios.get("/posts" + search);
  // 复制数组并反转，确保最新帖子排在首位
  const reversedPosts = [...res.data].reverse();
  setPosts(reversedPosts);
};

方案二：后端按发布时间倒序返回数据 #

更推荐的做法是在后端处理排序逻辑，这样分页、筛选等场景下数据逻辑更统一：

• 若使用MongoDB：查询时添加排序条件 db.posts.find().sort({ createdAt: -1 })（createdAt为帖子创建时间字段）
• 若使用SQL：查询语句添加 ORDER BY created_at DESC

后端调整后，前端无需修改代码，直接使用setPosts(res.data)即可拿到按「最新到旧」排序的帖子列表。

完整修改后代码（方案一） #

import Header from "../../components/header/Header";
import Posts from "../../components/posts/Posts";
import Sidebar from "../../components/sidebar/Sidebar";
import "./home.css";
import axios from "axios";
import { useLocation } from "react-router";
import { useState, useEffect } from "react"; // 补充原代码遗漏的钩子导入

export default function Home() {
  const [posts, setPosts] = useState([]);
  const { search } = useLocation();

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await axios.get("/posts" + search);
      const reversedPosts = [...res.data].reverse();
      setPosts(reversedPosts);
    };
    fetchPosts();
  }, [search]);
  return (
    <>
      <Header />
      <div className="home">
        <Posts posts={posts} />
        <Sidebar />
      </div>
    </>
  );
}

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