在Reactjs上收听socket.io服务器时如何setState（）？

Question

我开发了一个socket.io服务器，该服务器每10秒将数据发送给客户端。 socket.io客户端用于我使用ReactJS类组件创建的应用程序。我连接到componentDidmount中的套接字，并在componentDidupdate中收听了套接字。

let socket = null
 
class Map extends Component {
    constructor(props) {
        super(props)
        this.state= {
            stateData: null
        }
    }
 
    componentDidMount() {
        socket = io.connect('http://localhost:8080');
        // calling some method
    }
 
    componentDidUpdate( {
        if(socket !== null) {
            socket.on("positionUpdates", (data) => {
                // console log to check if the data was connected successfully and the time when it got the data
                console.log("connected", data, new Date())
                this.setState({stateData: data})
            })
        }  
    }
 
    render() {
        return (
     
        )
    }
}

我将使用setState（）将我从套接字中获得的数据保存到状态。但是在运行代码时，我遇到了一件奇怪的事情。我在socket.on之后做了console.log。 console.log应在检索数据时每10秒发生一次。但是发生的是console.log多次显示。当我删除setState时，代码通常会再次运行。

在socket.io client上收听socket.io服务器时，我应该如何做setState？

Answer 1

因此，从我对socket.io的侦听器上的理解中，您可以收听相同的事件，但具有不同的功能。

因此，您可以做类似的操作

socket.on("event1", () => console.log("this is my 1st listener"))
socket.on("event1", () => console.log("this is the 2nd listener but with same event name"))

，因此每次设置状态后componentDidupdate被触发并socket.on（“ positionupdates”，（data）=＆gt; {... {...}）多次注册positionupdates事件。

因此，要修复此操作，将您的socket.on s移至componentdidmount，并确保在卸载后离开侦听器。

eventHandlerFunc(data) {
    // do something with data
},
componentDidMount() {
    socket = io.connect('http://localhost:8080');
    socket.on("event name", eventHandlerFunc);
},
componentWillUnmount() {
    socket.off("event name", eventHandlerFunc)     
}