React setState 不同的语法如何输出不同的结果？答案

【问题标题】：How React setState different syntax outputs different results?React setState 不同的语法如何输出不同的结果？
【发布时间】：2023-02-16 22:23:04
【问题描述】：

我有一个状态，它是一个字符串数组，包含收到的所有消息。还有一个在收到新消息时触发的 useEffect。因此，我尝试使用 set state 将新消息附加到留言板，但它会生成一个 starnge 结果。

最初的想法：像往常一样将内容传播到州。

    useEffect(() => {
        socket.on("recive_message", (data) => {
            setBoard((chats) => [data.message, ...chats])
        })
    }, [])

但这种方式没有附加，聊天板第一个元素被传入消息替换..于是尝试了网上看到的另一种方式：

    useEffect(() => {
        socket.on("recive_message", (data) => {
            setBoard([data.message, ...board])
        })
    }, [])

这很好用。这两种语法有什么区别？

【问题讨论】：

【解决方案1】：

第一个例子是正确的，你是用空数组初始化状态吗？如果不是，那可能会导致一些问题（你不能传播未定义的）。第二个示例不正确，因为您没有将变量 board 作为 useEffect 依赖项，因此它不会更新并且始终具有初始值。

【讨论】：