javascript - React Hook 在 useEffect 中返回基值

Question

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

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
      }
    })

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

标签： javascriptreactjsreact-hooks

Answer 1

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

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

这里的解决方案是在useEffect的依赖数组中添加view和curFlip，并在useEffect清理函数中关闭socket

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]);