需要在 useEffect 中访问 useState 值，但不能将它放在依赖项 arr 中，因为 socket.io

Question

我有一个从发送 +1 或 -1 的服务器发出的套接字。 socket.on 必须在 useEffect 中，否则套接字会被调用两次。我不能只将数字 const 放在依赖项数组中，因为每次调用套接字时它都会链接以前的每个调用，每次都需要更长的时间。 那么如何使用套接字更新号码？

function test() {
    const [number, setNumber]= useState(0);

    useEffect(() => {
        socket.on('numChange', function(data) {
            let newNum = number + data;
            setNumber(newNum)
            console.log(number)
        });
    }, [socket])

    return (
    <main>
        {number}
    </main>
)}

这是我的实际问题的简化片段。套接字是在全局上下文中创建的。我开始使用的一个解决方案是将数字值存储在本地存储中并在 socket.on 函数中检索它，但这并不是一个适用于我所有用例的解决方案

Answer 1

您是否尝试过从依赖项数组中删除 socket？理想情况下，您应该设置一个套接字处理程序，也仅在挂载时设置。

 useEffect(() => {
    socket.on('numChange', function(data) {
        let newNum = number + data;
        setNumber(newNum)
        console.log(number)
    });
}, [])

Answer 2

我无法解释它为什么有效，但我想我已经找到了我一直在寻找的解决方案

useEffect(() => {
    socket.on('numChange', function(data) {
        setNumber(number => number + data);
    });
}, [socket]);

通过在 Chat.js

中交叉引用 this repo 找到解决方案

需要在 useEffect 中访问 useState 值，但不能将它放在依赖项 arr 中，因为 socket.io

Need to access useState value within a useEffect, but cant put it in dependency arr because socket.io

socket.io

reactjs

react-hooks