使用useEffect模拟ComponentDidUpdate实现三按钮互斥激活遇旧状态问题求助

嘿，我来帮你解决这个按钮互斥激活的问题～ 首先得说，你最开始用三个独立状态变量维护每个按钮的激活状态，确实容易踩坑，比如遇到的「获取旧状态」问题，本质上是因为React的状态更新是异步批量处理的，而且维护多个关联状态本身就会增加同步的复杂度。

最优方案：用单个状态变量替代三个独立状态 #

其实根本不需要给每个按钮单独设状态，我们只需要一个状态来记录当前激活的按钮标识就够了。这样既能简化逻辑，又能彻底避免状态不同步的问题。

举个具体的实现例子：

import { useState } from 'react';

function MutexButtons() {
  // 用activeButton记录当前激活的按钮，值可以是btn1/btn2/btn3，初始为null表示无激活状态
  const [activeButton, setActiveButton] = useState(null);

  // 点击按钮时更新激活状态：如果点击的是已激活的按钮，就取消激活；否则设置为当前按钮
  const handleButtonClick = (btnId) => {
    setActiveButton(prev => prev === btnId ? null : btnId);
  };

  return (
    <div>
      <button
        className={activeButton === 'btn1' ? 'active' : ''}
        onClick={() => handleButtonClick('btn1')}
      >
        按钮1
      </button>
      <button
        className={activeButton === 'btn2' ? 'active' : ''}
        onClick={() => handleButtonClick('btn2')}
      >
        按钮2
      </button>
      <button
        className={activeButton === 'btn3' ? 'active' : ''}
        onClick={() => handleButtonClick('btn3')}
      >
        按钮3
      </button>
    </div>
  );
}

这种思路的好处很明显：

• 逻辑极简：只需要维护一个状态变量，无需处理多个状态的同步
• 避免异步坑：状态更新完全基于当前激活的标识，不会出现拿旧状态的问题
• 扩展性强：如果后续要加更多按钮，只需要新增对应的标识即可，不用修改状态同步逻辑

为什么你之前的useEffect方案会出问题？ #

你之前用useEffect监听三个状态然后互相重置，问题出在：

1. React的状态更新是异步批量执行的，当你触发某个状态变化时，另外两个状态的更新还没完成，useEffect可能会拿到中间状态的值
2. 三个状态之间存在强关联，用这种「互相覆盖」的方式很容易出现状态不一致的情况

如果一定要坚持用三个状态的写法（非常不推荐），可以用函数式更新来确保拿到最新状态，但写法会非常冗余：

useEffect(() => {
  if (isActive === "true") {
    setActive2(() => "false");
    setActive3(() => "false");
  }
  if (isActive2 === "true") {
    setActive(() => "false");
    setActive3(() => "false");
  }
  if (isActive3 === "true") {
    setActive(() => "false");
    setActive2(() => "false");
  }
}, [isActive, isActive2, isActive3]);

但还是那句话，单个状态的方案才是最优解，能从根源上解决问题。

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