反应状态重置

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 出于某种原因在开始时缓存 'messages'，并重用原始值，但不知道我将如何调试或修复它。

Answer 1

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

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

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

反应状态重置

React state resetting

javascript

node.js

reactjs

react-functional-component

use-state