Question

我有一个基本组件，可以订阅EventEmitters事件。它要做的就是累积一组消息。

发生了什么事，就是消息数组只包含最新消息而告终。

以下是组件来源：

export const MessageList = ({serverId, connection}) =>
{
    var [messages, setMessages] = useState([]);

    const appendSystem = (message) =>
    {
        console.log("Appending " + message);
        console.log(messages);

        setMessages([...messages, message]);
    }

    useEffect(() =>
    {
        connection.on('system', appendSystem);

        return () => connection.removeListener('system', appendSystem);
    },
    [serverId]);

    console.log("Rendering");
    console.log(messages);
}

但是我得到的输出...

Rendering
[]
Appending Permission granted. Attempting connection.
[]
Rendering
["Permission granted. Attempting connection."]
Appending Connection Succeeded
[]
Rendering
["Connection Succeeded"]

因此，似乎每次调用appendSystem时，messages都是一个空数组。因此，setMessages总是将新消息追加到一个空数组。

有人知道这是什么原因吗？我的印象是appendSystem出于某种原因在开始时会缓存“消息”，并重用原始值，但不知道我将如何调试或修复它。

Answer 1

这是React钩子的非直观状态设置机制的常见问题。

尝试将setMessages用作函数的参数，而不要使用新值。这将保证您使用其最新值：

setMessages(prevMessages => [...prevMessages, message]);

反应状态重置

1 个答案: