反应状态重置

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]);