React中socket.on触发时数组状态jobData无法更新的解决请求

问题原因 #

你的代码里，socket.on的回调函数捕获了组件初始渲染时的jobData闭包，每次触发事件时，回调内的jobData始终是初始空数组，导致每次更新后数组里只有新的userdata，无法累积数据。另外，在组件顶层直接创建socket会导致组件每次渲染都重新建立连接，可能引发重复监听、资源浪费等问题。

解决方案 #

1. 将Socket初始化与事件监听移入useEffect #

确保Socket连接只建立一次，事件监听仅绑定一次，同时在组件卸载时清理监听，避免内存泄漏。

2. 使用函数式更新状态 #

通过setJobData的函数式调用获取最新状态值，保证每次更新都基于当前最新的数组。

修改后的完整代码 #

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

function YourComponent() {
  const [jobData, setJobData] = useState([]);

  useEffect(() => {
    // 仅在组件挂载时初始化一次Socket连接
    const socket = io.connect("http://localhost:3000");

    // 定义事件回调函数
    const handleJobReceived = (userdata) => {
      console.log(userdata);
      // 函数式更新：基于最新的prevState添加新数据
      setJobData(prevState => [...prevState, userdata]);
    };

    // 绑定Socket事件监听
    socket.on("job received", handleJobReceived);

    // 组件卸载时清理监听与Socket连接
    return () => {
      socket.off("job received", handleJobReceived);
      socket.disconnect();
    };
  }, []); // 空依赖数组，确保useEffect仅执行一次

  useEffect(() => {
    console.log("jobData updated", jobData);
  }, [jobData]);

  return (
    <div>
      {jobData.map((item, index) => {
        return (
          <section key={index}>
            <div className="border-2 border-[#6B84DD] rounded-md p-1 my-4">
              <span className="flex items-center justify-between">
                <div>
                  <span className="pr-2 font-semibold">Date :</span>
                  <span className="font-medium">{item.date}</span>
                </div>
                <div>
                  <span className="pr-2 font-semibold">Time :</span>
                  <span className="font-medium">{item.time}</span>
                </div>
              </span>
            </div>
          </section>
        );
      })}
    </div>
  );
}

export default YourComponent;

关键说明 #

• 函数式更新：setJobData(prevState => [...prevState, userdata])中，prevState是React传递的最新状态值，确保每次更新都基于当前数组的最新版本，彻底解决闭包导致的旧值问题。
• Socket生命周期管理：将Socket初始化放在useEffect中并设置空依赖，保证只在组件挂载时建立一次连接；返回的清理函数会在组件卸载时移除事件监听并断开连接，防止内存泄漏和重复监听。
• 避免顶层Socket创建：如果在组件顶层创建Socket，组件每次渲染都会重新实例化Socket，导致多个连接，不仅浪费资源，还会让事件回调捕获不同的闭包，加重状态更新异常问题。

内容的提问来源于stack exchange，提问作者Shashank Singh