React Hook 在 useEffect 中返回基值

Question

当使用新信息调用 Web 套接字时，我在尝试更新钩子时遇到了障碍，并注意到钩子返回了我在 useImpact 中设置的默认值，而在渲染中它返回了正确的值。我完全被难住了，不知道为什么，很好奇是否有人可以提供帮助，非常感谢。

const [view, setView] = useState(false)
const [curFlip, setFlip] = useState(null)
tradeSocket.addEventListener('message', async (msg) => {
const message = JSON.parse(msg.data)
if (message.tradelink) {
// not needed
} else if (message.redItems || message.blueItems) {
// not needed
} else if (message.flips) {
console.log('effect ', view, curFlip) // this is where the issue occurs, it returns false and null
if (view && curFlip) {
console.log('theyre viewing a flip')
for (let i = 0; i < message.flips.length; i++) {
console.log('looping ' + i, message.flips[i].offer)
if (message.flips[i].offer === curFlip.offer) {
setFlip(message.flips[i])
}
}
}
setCoinflips(message.flips)
} else if (message.tradeid) {
// not needed
}
})

它为每个渲染/效果调用返回的值的图像。

Answer 1

根据我们的输出，您似乎只在 useImpact 中的初始渲染中设置了一次套接字侦听器。

现在，由于 useEffect 回调运行一次，因此侦听器函数内闭包中使用的值将始终显示初始值

这里的解决方案是将视图和curFlip添加到useEffect的依赖数组中，并关闭useEffect清理函数中的套接字

useEffect(() => {
tradeSocket.addEventListener('message', async (msg) => {
const message = JSON.parse(msg.data)
if (message.tradelink) {
// not needed
} else if (message.redItems || message.blueItems) {
// not needed
} else if (message.flips) {
console.log('effect ', view, curFlip) // this is where the issue occurs, it returns false and null
if (view && curFlip) {
console.log('theyre viewing a flip')
for (let i = 0; i < message.flips.length; i++) {
console.log('looping ' + i, message.flips[i].offer)
if (message.flips[i].offer === curFlip.offer) {
setFlip(message.flips[i])
}
}
}
setCoinflips(message.flips)
} else if (message.tradeid) {
// not needed
}
})
return () => {
tradeSocket.close();
}
}
}, [curFlip, view]);