React useEffect中事件处理器闭包捕获旧状态值的问题与解决方案

import { useContext, useEffect, useState } from "react";
// 假设WebsocketContext已定义并提供socket实例

export const DashboardNavbar = (props) => { 
  const socket = useContext(WebsocketContext);
  const [current, setCurrent] = useState(0);

  console.log("DashboardNavbar is rerendering...");

  const showCurrent = () => {
    console.log("showCurrent is running and current = ", current);
  };

  const incrementCurent = () => {
    setCurrent((prev) => prev + 1);
  };

  useEffect(() => {
    // 这里的showCurrent函数是在组件首次渲染时捕获的
    socket.on("newNotification", (payload) => {
      // ... 业务逻辑
      showCurrent(); // 总是打印 current = 0
    });

    return () => {
      // 清理事件监听器
      socket.off("connect");
      socket.off("newNotification");
    };
    // 依赖数组为空，此effect只运行一次
  }, []); 

  return (
    <>
      <button onClick={showCurrent}>Show Current (via JSX)</button>
      <button onClick={incrementCurent}>Increment Current</button>
    </>
  );
}

import { useContext, useEffect, useState } from "react";

export const DashboardNavbar = (props) => { 
  const socket = useContext(WebsocketContext);
  const [current, setCurrent] = useState(0);

  const showCurrent = () => {
    console.log("showCurrent is running and current = ", current);
  };

  const incrementCurent = () => {
    setCurrent((prev) => prev + 1);
  };

  useEffect(() => {
    // 每次current变化时，此effect都会重新运行
    // 重新注册事件监听器，并捕获最新的showCurrent函数（及其闭包中的current值）
    socket.on("newNotification", (payload) => {
      // ... 业务逻辑
      showCurrent(); // 现在可以访问到最新的current值
    });

    return () => {
      // 每次effect重新运行时，都会先执行清理函数
      socket.off("connect");
      socket.off("newNotification");
    };
  }, [current]); // 包含current作为依赖项

  return (
    <>
      <button onClick={showCurrent}>Show Current (via JSX)</button>
      <button onClick={incrementCurent}>Increment Current</button>
    </>
  );
}

import { useContext, useEffect, useState, useRef } from "react";

export const DashboardNavbar = (props) => { 
  const socket = useContext(WebsocketContext);
  const [current, setCurrent] = useState(0);
  // 创建一个ref来存储current的最新值
  const currentRef = useRef(current); // 初始值可以设置为current

  // 使用另一个useEffect来同步ref的current属性与state的current值
  useEffect(() => {
    currentRef.current = current; // 每次current更新时，更新ref的current属性
  }, [current]); // 这个effect只依赖于current

  // showCurrent函数现在从ref中获取值
  const showCurrent = () => {
    console.log("showCurrent is running and current = ", currentRef.current);
  };

  const incrementCurent = () => {
    setCurrent((prev) => prev + 1);
  };

  useEffect(() => {
    // 这个effect的依赖数组仍然为空，只运行一次
    socket.on("newNotification", (payload) => {
      // ... 业务逻辑
      showCurrent(); // 调用showCurrent，它会从currentRef.current获取最新值
    });

    return () => {
      socket.off("connect");
      socket.off("newNotification");
    };
  }, []); // 依赖数组为空

  return (
    <>
      <button onClick={showCurrent}>Show Current (via JSX)</button>
      <button onClick={incrementCurent}>Increment Current</button>
    </>
  );
}