通过重新呈现按日期排序数组

Question

我是新手，但我面临一个小问题。我建立一个社会实践的平台,用户可以发布,和评论。我正在使用更改流和套接字。IO来检测我的数据库中的任何更改。

一切都工作得很好，但我想知道的是，当我创建一个帖子时，我想要的状态是，在通过帖子映射之前，已设置为通过日期排序。知道当useEffect被触发时，检索到的数据将按日期排序，而不是一直滚动到新创建的帖子。

这是我的代码片段。我尝试了不同的方法来分类，但不幸的是我无法实现它。我想帖子是按日期排序时重新渲染显示，如果有意义。

const [posts, setPosts] = useState([]);
useEffect(() => {
const handler = (item) => {
setPosts((oldPosts) => [...oldPosts.filter(p => p._id !== item._id), item]);
};
socket.on('posts', handler);
return () => socket.off('posts', handler);
}, []);

Answer 1

其实我们有两种可能:

1-更新的item是新的。所以把它放在数组的第一个索引

2更新的item是重复的。然后使用map更新它的值

const handler = (item) => {
setPosts((oldPosts) => {
const findItem = oldPosts.find((post) => post._id === item._id);
if (findItem) {
return oldPosts.map((post) => (post._id === item._id ? item : post));
} else {
return [item, ...oldPosts];
}
});
};

请注意，在此方法中，您应该按日期对组件第一次呈现的帖子进行排序。

Answer 2

您所需要做的就是在setPosts之前运行此代码，并使用以下代码将日期排序数组传递给setPosts。

yourArray.sort(function (a, b) {
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(b.date) - new Date(a.date);
});