使用stateB的计算需由stateA触发时，如何设置useEffect依赖？

首先得提个小错误：你代码里的useState声明写错啦，应该是const [stateA, setStateA] = useState(0);和const [stateB, setStateB] = useState(0);——变量名和更新函数不能重名，不然会互相覆盖的。

回到核心问题：你希望这个useEffect只在stateA变化时触发，但计算过程中又要用到stateB。如果直接只写[stateA]作为依赖，会遇到「过期闭包」的问题：当stateB更新后，这个useEffect不会重新执行，里面的stateB还是上次执行时的旧值，这肯定不是你想要的结果。

下面给你两种符合需求的解决方案：

方案一：用useRef保存stateB的最新值 #

这是最贴合你需求的方式，既能保证useEffect只在stateA变化时触发，又能获取到stateB的最新值：

function Example() {
  const [stateA, setStateA] = useState(0);
  const [stateB, setStateB] = useState(0);
  // 创建ref来存储stateB的最新值
  const stateBRef = useRef(stateB);

  // 单独用一个effect同步stateB到ref，确保ref始终是最新的
  useEffect(() => {
    stateBRef.current = stateB;
  }, [stateB]);

  useEffect(() => {
    const calculation = () => {
      // 从ref中获取最新的stateB
      console.log(stateBRef.current);
    };
    calculation();
  }, [stateA]); // 依赖仅保留stateA，满足你的触发条件

  return null;
}

原理说明： #

useRef的current属性是可变的，而且修改它不会触发组件重渲染。我们用一个单独的useEffect监听stateB的变化，每次stateB更新就把最新值同步到ref里。这样在只依赖stateA的那个effect里，我们访问stateBRef.current就能拿到stateB的最新值，同时这个effect只会在stateA变化时执行，完美匹配你的需求。

方案二：如果允许stateB变化时也触发effect（可选） #

如果你的需求没有那么严格，允许stateB变化时也执行这个计算，那最简单的方式就是把stateB加入依赖数组：

function Example() {
  const [stateA, setStateA] = useState(0);
  const [stateB, setStateB] = useState(0);

  useEffect(() => {
    const calculation = () => {
      console.log(stateB);
    };
    calculation();
  }, [stateA, stateB]); // 同时依赖stateA和stateB

  return null;
}

这种方式更简洁，但会在stateA或stateB任意一个变化时触发effect，如果这不符合你「仅需在stateA变化时触发」的要求，就优先用方案一。

重要提醒： #

千万别忽略stateB的依赖直接只写[stateA]，也别用// eslint-disable-next-line react-hooks/exhaustive-deps来禁用lint报错——这会埋下隐藏bug，因为effect里的stateB会一直是旧值，也就是所谓的「过期闭包」问题，这也是React hooks指南里反复强调要避免的情况。

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