socket.io (on message) 每条消息触发多次答案

【问题标题】：socket.io (on message) triggers multiple times per messagesocket.io (on message) 每条消息触发多次
【发布时间】：2021-07-15 05:48:06
【问题描述】：

我正在学习 react js 并正在使用 socket.io 制作一个聊天应用程序但是我遇到了这个问题，它记录每条消息的次数越来越多

这是我的 socketio 代码


import React, { useState } from 'react'
import io from "socket.io-client"
const socket = io("https://Wyvern-API.huski3.repl.co/api/chat")

socket.on('connect', () => {
    socket.emit('joined', { 'serverchannel': 120 })
    console.log("Connected")
})

function socketio() {
    const [hello, setCount] = useState("0")
    socket.on('message', (data) => {
        setCount(data.content)
        console.log(data.content)
    })
    return (
        <div>
            <h1>{hello}</h1>
        </div>
    )
}

export default socketio

我在测试期间使用 useEffect 阻止它向 ui 发送垃圾邮件，但是我不知道如何解决这个问题的根源

【问题讨论】：

标签： reactjs socket.io

【解决方案1】：

把你所有的 socketio 监听器放在 useEffect 中。当任何状态或数据发生变化时，React 会多次渲染，如果您的套接字 io 侦听器在 useEffect 之外，它们将被添加多次，因此会触发多个。

     import React, { useState } from 'react'
    import io from "socket.io-client"
    
    function socketio() {
        const [hello, setCount] = useState("0")
        const [socket, setSocket] = useState(null)

         useEffect(()=>{
           if(socket === null)
            {
                setSocket(io("https://Wyvern-API.huski3.repl.co/api/chat"))
            }
            if(socket)
            {
            socket.on('connect', () => {
            socket.emit('joined', { 'serverchannel': 120 })
            console.log("Connected")
            })

             socket.on('message', (data) => {
            setCount(data.content)
            console.log(data.content)
            })
        }
  },[socket])
           
        return (
            <div>
                <h1>{hello}</h1>
            </div>
        )
    }
    
    export default socketio

【讨论】：