若列表包含超过25个元素，则一次只使用最新的25个元素

Question

我有一个messages，它代表一个有多条消息的[]。我想设置一个锁定，以便只有25条最新的消息可用。我在MessageSide组件中对messages进行迭代。但是使用函数updateMessage(...)，我无法访问始终为1的messages.length，所以我在useEffect中写了这个。现在我的问题是，如何始终最好地只显示25个最新的元素，也就是说，首先删除最旧的元素。

const Messages = (roomId) => {
const [messages, setMessages] = useState([]);

useEffect(() => {
console.log(messages.length)
}, [messages]);


const updateMessages = (message) => {
if (roomId.toString() === message.roomid) {
const incomingMessage = {
...message,
id: message.senderId,
timestamp: message.timestamp,
chatid: message.roomid
};
console.log(messages.length) // always 1 
setMessages((messages) => [...messages, incomingMessage]);
} else {
localStorage.setItem("frankenstein_unread_messages", 3);
}
};
};
export default Messages;

消息侧

function MessageSide(props) {
const { messages, } = Messages(1);
return (
<div className="item">
{messages.map((message) => {
return (
<div>
<Message
message={message.body} // Einzelenen Nachrichten text
id={message.id} // User-ID id-profile
timestamp={message.timestamp} // writtenDate
chatid={message.chatid}
/>
</div>
);
})}
</div>
<div ref={messagesEndRef}/>
);
}
export default MessageSide;

消息数据：

它在控制台中的样子

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, id_profile: 1, id_groupchat: 3, timestamp: "2021-05-23T08:56:01.075Z", body: "Hello"}
1: {id: 1, id_profile: 1, id_groupchat: 3, timestamp: "2021-05-23T08:56:01.868Z", body: ""}

如何

[
{
id: 1, // is another id
id_profile: 1, 
id_groupchat: 3,
timestamp: "2021-05-23T08:56:01.075Z",
body: "Hello"
},
{
id: 1, // is another id
id_profile: 1, 
id_groupchat: 3,
timestamp: "2021-05-23T08:56:01.075Z",
body: "Test"
}
]

Answer 1

您可以将Array#slice取为负值，该负值从排序数组的末尾开始计数。

如果数组较短，此方法将返回所需计数或更少的新数组。

array.slice(-25)