需要访问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 中交叉引用此回购找到解决方案