React函数组件中RxJS订阅回调无法访问当前useState状态的原因分析

你遇到的这个问题本质上是JavaScript闭包与React组件渲染周期的冲突，咱们来拆解下根源：

1. 第二个useEffect的依赖数组是空的[]，这意味着它只会在组件第一次挂载时执行一次。
2. 执行时你调用了setName("Test Test Test Test")，这会触发组件重新渲染，但此时订阅回调已经创建完成——它捕获的是第一次渲染时的name值（也就是初始的空字符串""）。
3. 后续组件重新渲染时，这个useEffect不会再次执行，所以订阅回调一直是旧的闭包，永远拿不到更新后的name状态。

而第一个useEffect因为依赖了name，每次name变化都会重新执行，所以能打印出最新值，这和订阅回调的逻辑完全不同。

这里提供几种实用的解决思路，你可以根据业务场景选择：

方案1：让useEffect依赖name，重新创建订阅 #

最简单的方式是把name加入第二个useEffect的依赖数组，这样每次name更新时，都会取消旧订阅并创建新的订阅，新回调就能捕获到最新的name值：

function DesignView() {
  const [name, setName] = useState("");

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

  useEffect(() => {
    let subscription = directionService.getDirection().subscribe(() => {
      console.log(name); // 现在能拿到最新的name值了
    });
    return () => {
      subscription.unsubscribe();
    };
  }, [name]); // 这里添加name作为依赖

  useEffect(() => {
    setName("Test Test Test Test");
  }, []);

  return ( ... );
}

注意：如果directionService.getDirection()每次调用都会返回新的流，这个方案完全可行；如果它返回的是同一个单例流，频繁取消订阅再重新订阅可能会丢失中间消息，这时可以考虑下面的方案。

方案2：用useRef保存最新的状态值 #

使用useRef创建一个引用，每次name更新时同步更新这个引用，订阅回调里直接访问最新的状态：

function DesignView() {
  const [name, setName] = useState("");
  const nameRef = useRef(name); // 初始化引用

  // 同步状态到ref
  useEffect(() => {
    nameRef.current = name;
  }, [name]);

  useEffect(() => {
    setName("Test Test Test Test");
    let subscription = directionService.getDirection().subscribe(() => {
      console.log(nameRef.current); // 这里访问的是最新的name值
    });
    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return ( ... );
}

这个方案的好处是不需要频繁重新订阅，适合流是单例且需要持续监听的场景。

方案3：将状态整合到RxJS流中 #

如果你的业务逻辑大量使用RxJS，可以把React状态转化为流，通过RxJS操作符组合处理，从根源避免闭包问题：

import { BehaviorSubject, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

function DesignView() {
  const [name, setName] = useState("");
  const nameSubject = useRef(new BehaviorSubject(name)).current;

  // 同步React状态到Subject
  useEffect(() => {
    nameSubject.next(name);
  }, [name]);

  useEffect(() => {
    setName("Test Test Test Test");
    // 组合方向流和名字流
    const subscription = combineLatest([
      directionService.getDirection(),
      nameSubject
    ]).pipe(
      map(([direction, currentName]) => {
        // 在这里可以拿到最新的currentName
        console.log(currentName);
        return /* 处理逻辑 */;
      })
    ).subscribe();

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return ( ... );
}

这种方式更贴合RxJS的响应式编程思想，适合复杂的状态组合场景。

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