反应状态重置

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