每当我更新数组的状态时，平滑滚动就会停止工作？

Question

我有一个 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)

的情况下测试了它，它按预期工作了。所以我认为问题是每当我调用该行代码时。

Answer 1

上帝保佑，谢谢@IndexZero，这不是确切的解决方案，但根本原因是正确的。

if (messages.length >= 5) {
        setMessages([...messages.slice(1,messages.length), JSON.parse(data.data)])
    } else {
        setMessages([...messages, JSON.parse(data.data)]);
    }

我试图通过调用 array.shift() 直接修改数组。我不太清楚为什么，但这最终是解决问题的解决方案。