react 中Websocket 推送，uesState的值不赋值？

Question

使用websocket来接收服务端传过来的数据，然后根据该数据，调用useState的第二个参数，
来更新state。正常的时候是可以的。state被更新，页面被刷新。
但是，当我们去另外一个页面，然后再返回该页面。页面不会动态刷新了。
查看：websocket 正常推送，监听 useState的值一直是空数组。

查看websocket 数据返回
监控useState的值，一直是空
例子代码：

  const throttles = throttle((values: any) => {
    setLogList(values) // 在这里可以查看到返回的数据是正确的，但是设置时，就不生效。
  })

  useEffect(() => {
    createWs()
    onMessage('debugLog', function debugLog(response: any) {
      if (response?.type === 'log') {
        if (cacheLogList.length >= maxNum) {
          cacheLogList = cacheLogList.splice(-maxNum)
        }
        const _logList = clone(cacheLogList)
        _logList.push(response.msg)
        cacheLogList = _logList
        listRef.current = _logList
        console.log(cacheLogList)
        throttles(cacheLogList)
      }
    })

    return () => {
      setLogList([])
      cacheLogList = []
      sendMessage({
        body: {
          cmd: 'unsub_log',
          subcmd: '',
        },
      })
    }
  }, [])

Answer 1

可以参考一下这篇文章
React中使用useState时数据不更新的原因及解决方案详解

我推荐两种解决方案
1.使用函数形式的setState： 这种方法可以确保你总是使用最新的状态值，避免闭包陷阱。

const addMessage = (message) => {
  setMessages((prevMessages) => [...prevMessages, message]);
};

2.使用useRef持有最新状态： 这种方法可以确保在异步操作中使用最新的状态值。

const [count, setCount] = useState(0);
const countRef = useRef(count);
useEffect(() => {
  countRef.current = count;
}, [count]);

const handleTimeout = () => {
  console.log('Current count:', countRef.current);
};
setTimeout(handleTimeout, 1000);