我如何让我的 React 组件及时呈现？

Question

我正在做一个 React 项目，我一直在尝试让 Message 组件以一定的速度呈现，这就是我现在拥有的：


    const [chatMessages, setChatMessages] = useState([])

    function handleSubmit(event) {
        event.preventDefault()
        const input = inputValue;
        setinputValue("")
        if (input && inputHandler(input)) {
            const newMessages = inputHandler(input)
            const interval = setInterval(() => {
                if (!newMessages.length) return clearInterval(interval)
                setChatMessages([...chatMessages, newMessages.shift()])
            }, 500);
        }
    }

inputHandler() returns 我想单独添加到状态的对象数组，setChatMessages() 更改状态，然后 chatMessages 状态被映射以创建我的消息组件。

此代码适用于单个消息，但如果 inputHandler() returns 多于 1 条消息，则仅添加一条新消息，并在数组中的所有消息之间循环，直到它停止在最后一个。

似乎 chatMessages 状态在迭代之间没有更新，有人知道我该如何解决这个问题吗？

Answer 1

首先，在 const newMessages = inputHandler(input) 之后的队列中缓存 newMessages。其次，每 500 毫秒检查一次队列，您可以使用数组来做到这一点。如果队列不为空，弹出第一个。

Answer 2

好的，所以我设法表现得像我想要的那样：

let interval = setInterval(() => {
                if (!newMessages.length) return clearInterval(interval)
                chatMessages = [...chatMessages, newMessages.shift()]
                setChatMessages([...chatMessages])
            }, 500);

感觉此代码是 war 犯罪，但它有效

我如何让我的 React 组件及时呈现？

How do i get my React components to render in a timely fashion?

javascript

state

setinterval

reactjs