React中Socket回调获取旧state值的问题求助

问题描述 #

需求是根据statusc状态控制jobData数组的更新：当statusc为Active时接收Socket消息并更新数组，为Inactive时不更新。已通过useEffect和按钮点击确认statusc已变为Active，但Socket的"job received"回调中始终获取到旧的statusc值（初始值为null，回调中显示为Inactive）。

用户提供的相关代码：

useEffect(() => {
  console.log(statusc)
}, [statusc])

const handleJobReceived = (userdata) => {
  console.log("The status of a person is " + statusc);

  setJobData((prevState) => {
    if (statusc === "Active") {
      console.log("adding function run");
      return [...prevState, userdata];
    } else if (statusc === "Inactive") {
      return [...prevState];
    }
  });
};


socket.on("job received", (userdata) => {
  console.log("The status of a person is " + statusc);
  handleJobReceived(userdata)
});

<button onClick={()=>{console.log(statusc)}}>Current statusc</button>

问题原因 #

Socket的on回调是在组件初始渲染时绑定的，该回调捕获了当时的statusc闭包。后续组件因statusc变化重新渲染时，旧的回调依然存在，不会自动获取到新的statusc值，导致判断逻辑失效。

解决方案 #

方案一：使用useRef保存最新状态值 #

通过useRef创建一个引用，实时同步statusc的最新值，在Socket回调中直接读取该引用的current属性，就能获取到最新状态。

import { useState, useEffect, useRef } from 'react';

// 组件内状态定义
const [statusc, setStatusc] = useState(null);
const [jobData, setJobData] = useState([]);
const statusRef = useRef(statusc);

// 同步statusc到ref，确保ref始终持有最新值
useEffect(() => {
  statusRef.current = statusc;
  console.log(statusc);
}, [statusc]);

const handleJobReceived = (userdata) => {
  console.log("当前状态: " + statusRef.current);

  setJobData((prevState) => {
    if (statusRef.current === "Active") {
      console.log("执行添加操作");
      return [...prevState, userdata];
    } else if (statusRef.current === "Inactive") {
      return [...prevState];
    }
    return prevState; // 处理statusc为其他值的情况
  });
};

// 在useEffect中绑定Socket事件，添加清理函数防止内存泄漏
useEffect(() => {
  const handleJob = (userdata) => {
    console.log("当前状态: " + statusRef.current);
    handleJobReceived(userdata);
  };

  socket.on("job received", handleJob);

  // 组件卸载或重新渲染时移除旧回调
  return () => {
    socket.off("job received", handleJob);
  };
}, []); // 空依赖，只绑定一次Socket事件

方案二：随statusc变化重新绑定Socket回调 #

在useEffect中监听statusc的变化，每次状态更新时先移除旧的Socket回调，再绑定新的回调，确保新回调能捕获最新的statusc值。

import { useState, useEffect } from 'react';

// 组件内状态定义
const [statusc, setStatusc] = useState(null);
const [jobData, setJobData] = useState([]);

const handleJobReceived = (userdata) => {
  console.log("当前状态: " + statusc);

  setJobData((prevState) => {
    if (statusc === "Active") {
      console.log("执行添加操作");
      return [...prevState, userdata];
    } else if (statusc === "Inactive") {
      return [...prevState];
    }
    return prevState;
  });
};

// 监听statusc变化，重新绑定Socket回调
useEffect(() => {
  const handleJob = (userdata) => {
    console.log("当前状态: " + statusc);
    handleJobReceived(userdata);
  };

  socket.on("job received", handleJob);

  // 清理函数：移除当前回调
  return () => {
    socket.off("job received", handleJob);
  };
}, [statusc]); // 依赖statusc，状态变化时重新绑定

注意事项 #

• 两种方案都必须添加清理函数，使用socket.off移除对应的回调，避免组件卸载后仍存在监听导致内存泄漏。
• 方案一性能更优，无需频繁绑定/解绑Socket事件；方案二逻辑更直观，适合简单场景。

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