使用 socket.io 更新状态时出现问题，在设置状态后，它不会在下一个套接字消息之前保留

Question

所以我正在尝试使用 reactjs 制作一个基本的评论应用程序，我有一个 nestjs 后端，我知道它已经可以工作了，因为我制作了一个基本的 html 页面来测试这个概念。

基本上，在一条新的“消息”上，我试图将评论状态设置为 [...comments, newComment]，以便保留之前的评论。

但是每次我收到来自服务器的消息时，我的状态（评论）都会被新消息覆盖并且不会保留任何数据。

我做了一些故障排除，看起来状态（评论）根本没有被设置？这是我的代码：

const socket = io('http://localhost:4000');

function App() {

    const [comments, setComments] = useState([
    ]);

    function newComment(comment) {
        console.log("Request for new comment: ");
        console.log(comments);
        setComments([...comments, comment]);
    }

    useEffect(() => {
        console.log("Comments updated to: ")
        console.log(comments);
    }, [comments]);

    useEffect(() => {
        socket.on("message", data => {
            const theComment = data.data;
            let leComment = { id: 4, name: 'ted', comment: theComment }
            newComment(leComment);
        });
    }, []);

这是我在 chrome 中用于调试的控制台：

非常感谢任何帮助或建议，我已经坚持了一整天了！

我正在寻找的最终结果只是针对传入的任何新“消息”，该消息中的评论附加到我的状态，称为评论

Answer 1

我这里看到的问题是这样的

setComments([...comments, comment])

尝试在

中更改它

setComments(comments => [...comments, comment])

使用 socket.io 更新状态时出现问题，在设置状态后，它不会在下一个套接字消息之前保留

Trouble with updating state with socket.io, after state is set it is not retained before the next socket message

socket.io

reactjs

react-state