Reactjs 反应状态始终返回初始值

我正在创建一个web应用程序，它接收WebSocket消息并使用React、Next.js记录这些消息

我对国家有意见。 当我引用状态时，总是返回初始值

我的代码如下所示：

import React，{useState，useffect}来自“React”；
从“react bootstrap”导入{Container，Row，Col}；
导出默认函数Home（）{
让socket=null；
const[eventLog，setEventLog]=useState（[]）；
const[updateFlag，setUpdateFlag]=useState（0）；
const onWebSocketMessage=（e）=>{
const data=JSON.parse（e.data）；
setEventLog(
[
{
标题：data.title，
图标：data.icon，
body:data.body，
日期：新日期（），
},
].concat（事件日志）
);
setUpdateFlag（updateFlag+1）；
log（updateFlag）；
};
const connectWebSocket=（令牌）=>{
套接字=新的WebSocket（'wss://localhost/“+代币）；
socket.onmessage=onWebSocketMessage；
};
useffect（（）=>{
const token=localStorage.getItem（'token'）；
连接WebSocket（令牌）；
}, []);
const eventLogHtml=eventLog.map（（对象，索引）=>(
{obj.title}
{obj.body}

{obj.date.toString（）}

));
返回(
事件日志
{eventLogHtml}
);
}

在此代码中，

eventLog

始终返回初始值，即

[]

。 和

console.log（updateFlag）始终记录0

我期望
eventLog
和
console.log（updateFlag）接收消息时增加，但实际上只设置了最新的一个，并记录0

任何建议都将不胜感激。
谢谢大家!
 因为您需要在
useffect
上添加
依赖项。试试这个

useEffect(() => {
    const token = localStorage.getItem('token');
    connectWebSocket(token);
}, [eventLog]);

正如丹尼斯所说。当
eventLog
更改时，它会重新连接websocket。所以您必须拆分connect和listener事件

const token = localStorage.getItem("token");
socket = new WebSocket("wss://localhost/" + token);
//outside function component

useEffect(() => {
  const onMessage = () => {// do stuff}
  socket.on('message', onMessage)

  return () => socket.off('message', onMessage)
}, [eventLog, updateFlag])

您几乎没有以下问题：


关闭
updateFlag
值，该值不会在下一条消息中重新出现
重新分配值，如
socket
和连接函数
当
setState
为异步时，记录过时状态值

要汇总检查固定代码，请执行以下操作：

let socket = null;

export default function Home() {
  const [eventLog, setEventLog] = useState([]);
  const [updateFlag, setUpdateFlag] = useState(0);

  useEffect(() => {
    console.log(updateFlag);
  }, [updateFlag]);

  useEffect(() => {
    const onWebSocketMessage = (e) => {
      const data = JSON.parse(e.data);

      setEventLog((prev) => [
        {
          title: data.title,
          icon: data.icon,
          body: data.body,
          date: new Date(),
        },
        ...prev,
      ]);

      setUpdateFlag((prev) => prev + 1);
    };

    const token = localStorage.getItem("token");
    socket = new WebSocket("wss://localhost/" + token);
    socket.onmessage = onWebSocketMessage;
  }, []);

  ...
}

这与问题有什么关系？您只需在每个日志上重新建立到socket的连接，为什么要这样做？我认为它必须将intit connect websocket移动到其他具有零依赖性的useEffect。和侦听器
onmessage
对其他用户的影响。对不起，我太懒了。我现在要编辑我的答案。我必须在
onWebSocketMessage
函数中引用updateFlag值。。。是否无法在
onWebSocketMessage
函数中引用更新的值？