react和socket.io中的无限循环

Question

我正在尝试构建实时聊天消息。在客户端（React），每当有新用户进入聊天时，套接字的事件usuarios-conectados都会被触发（此套接字事件为我提供了当时连接的所有用户的数组）。

然后，我尝试在useState中设置该用户数组，但正因为如此，组件进入循环并不断重新渲染自己。

这似乎是问题所在，因为每当我调用useSocket，控制台时。日志（用户）不断打印连接的用户

import { useEffect, useState } from 'react'
import { io } from "socket.io-client";

export const useSockets = () => {

    const [socket, setSocket] = useState(
        io('http://localhost:8080', {
            'extraHeaders': {
                'x-token': localStorage.getItem('x-token')
            }
        })
    )

    const [users, setUsers] = useState([])

    useEffect(() => {

        socket.on('connect', () => {
            console.log('Sockets online')
        })

        socket.on('usuarios-conectados', (newUsers) => {

            setUsers(newUsers);
            console.log(users);
        })

        return () => {

            socket.on('disconnect', () => {
                console.log('Sockets offline')
            })
            socket.disconnect()
        }
    }, [])


    return [users]
}

Answer 1

您不应该将IO存储在状态中，而是在上下文中调用它，例如，让我在代码中显示。

1. 创建上下文

import React from 'react';
import io from 'socket.io-client';
        
const SOCKET_ADDR = process.env.REACT_APP_SOCKET_ADDR || '<your server>';
        
export const socket = io(SOCKET_ADDR, { withCredentials: false, transports: ['websocket'] });
        
export const SocketContext = React.createContext();

Answer 2

您不应该将io存储在状态中，而是在您的组件中创建一个文件并导入，然后在您初始化套接字本身之后将侦听您定义的事件。让我用代码显示。

//src/utils/socket.js
import io from "socket.io-client"
export const socket = io(process.env.BACKURL);

// component.jsx
import {socket} from './utils/socket'
 const [commentData , setCommentData] = useState([]);

useEffect(() => {
   socket.on("connect_error", () => {
    console.error("socket error!");
    socket.close();
  });

  // websokcet to comments
  socket.on("load_comment", (payload) => {
    setCommentData(payload);
  });
 return () => {
 socket.close();
}
}, [])
// second useEffect to see if statesChanged
useEffect(() => {
 console.log('Changed' , commentData)
} , [commentData])