为什么 useState() 会重复 websocket 事件? [英] Why does useState() duplicate websocket events?

问题描述

我的 react 组件正在通过 websocket 接收来自服务器的消息.当我尝试使用 useState() 更新状态时，套接字会重复.

如果我这样做...

import React, {useState} from 'react'导出默认值 () =>{let[message, setMessage] = useState()让 ws = new WebSocket("ws://blah");ws.onmessage = (e) =>{让 obj = JSON.parse(e.data);//事件名称console.log(obj.event);//事件数据控制台日志(对象.值)；//setMessage(obj.value)关闭}返回 
{信息}
}

然后控制台按预期自行显示每条消息

但是如果我在 setMessage(object.value) 中评论，那么每条消息的所有连接都会重复

setMessage() 以某种方式导致连接累积

解决方案

那是因为您要在每次渲染时创建一个新的 websocket.

由于连接到网络套接字是一种副作用"，您需要使用 useEffect

import React, {useState} from 'react'导出默认值 () =>{让 [message, setMessage] = useState()React.useEffect(() => {让 ws = new WebSocket("ws://blah");ws.onmessage = (e) =>{让 obj = JSON.parse(e.data);//事件名称console.log(obj.event);//事件数据控制台日志(对象.值)；setMessage(obj.value);};返回 () =>{ws.close()}}, [])返回 (<div>{信息}

);}

My react component is receiving messages from a server via a websocket. When I try to update state using useState() the sockets get duplicated.

If I do this...

import React, {useState} from 'react'

export default () => {

    let[message, setMessage] = useState()

    let ws = new WebSocket("ws://blah");

    ws.onmessage = (e) => {
        let obj = JSON.parse(e.data);

        // event name
        console.log(obj.event);

        // event data
        console.log(obj.value);

        // setMessage(obj.value)

        ws.close
    }
    return <div>
            {message}

    </div>
}

Then the console shows each message on its own as expected

But if I comment back in setMessage(object.value) then all the connections are duplicated for every message

Somehow the setMessage() causes connections to be accumulated

解决方案

That's because you're are creating a new websocket on every render.

Since connecting to a web socket is a "side effect" you'll want to use useEffect

import React, {useState} from 'react'

export default () => {

  let [message, setMessage] = useState()

  React.useEffect(() => {
    let ws = new WebSocket("ws://blah");

    ws.onmessage = (e) => {
      let obj = JSON.parse(e.data);

      // event name
      console.log(obj.event);

      // event data
      console.log(obj.value);

      setMessage(obj.value);
    };

    return () => {
      ws.close()
    }
  }, [])


  return (
    <div>
      {message}
    </div>
  );
}

这篇关于为什么 useState() 会重复 websocket 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！