React开发中通过重新渲染实现帖子数组按发布日期排序的问题

你的需求可以通过在更新posts状态前对数组按时间字段排序实现，默认最新发布的帖子排在列表最前。

代码修改方案 #

假设你的帖子数据中存储发布时间的字段为createdAt（可替换为你实际的字段名），修改socket的事件处理逻辑如下：

const [posts, setPosts] = useState([]);

useEffect(() => {
    const handler = (item) => {
         setPosts((oldPosts) => {
             // 先完成数据去重、合并
             const mergedPosts = [...oldPosts.filter(p => p._id !== item._id), item];
             // 按发布时间降序排序，最新的在前
             return mergedPosts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
         });
    };
    socket.on('posts', handler);
    return () => socket.off('posts', handler);
}, []);

补充说明 #

• 如果你的时间字段存储的是数字类型时间戳，可省略new Date()转换，直接写b.createdAt - a.createdAt即可，性能更高。
• 如果需要最早发布的帖子排在最前，调换排序逻辑中a和b的位置即可：new Date(a.createdAt) - new Date(b.createdAt)。
• 首次从接口拉取初始帖子列表时，也建议在赋值给posts前先做一次排序，保证初始渲染的列表顺序符合要求。

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