socket.io（在消息上）每条消息触发多次

Question

我正在学习 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 来阻止它在测试期间向用户界面发送垃圾邮件，但我不知道如何解决这个问题的根源

Answer 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