我有一个 React 组件,它应该像不和谐服务器中最后 5 条消息的滚动队列一样工作。每当队列中达到 5 条消息时,我就会使用 .shift() 从数组中弹出第一个对象,并将新消息添加到末尾。
我的问题是,对于前 5 条消息,我能够看到它们平滑滚动。但是,一旦超过该限制,并且代码开始在数组上调用 .shift() ,平滑滚动就会停止工作。
ws.addEventListener("message", data => {
if (messages.length > 5) {
setMessages(messages.shift());
}
setMessages([...messages, JSON.parse(data.data)]);
});
const messagesEndRef = useRef(null)
useEffect(() => {
messagesEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
}, [messages]);
const MessageList = ({ messages }) => (
<ul class="">
{messages.map(message => <DiscordMessage messageData={message}/>)}
<div ref={messagesEndRef}/>
</ul>
)
我在没有
if (messages.length > 5)
的情况下测试了它,它按预期工作了。所以我认为问题是每当我调用该行代码时。
上帝保佑,谢谢@IndexZero,这不是确切的解决方案,但根本原因是正确的。
if (messages.length >= 5) {
setMessages([...messages.slice(1,messages.length), JSON.parse(data.data)])
} else {
setMessages([...messages, JSON.parse(data.data)]);
}
我试图通过调用 array.shift() 直接修改数组。我不太清楚为什么,但这最终是解决它的解决方案。