React中如何实现点击循环切换状态映射单真值的Swap Hook

状态方案选择：合并维护优于拆分独立状态 #

你当前将三个互斥布尔值合并到同一个useState对象中维护的方案是合理的，比拆分三个独立状态更适配当前场景：

• 三个值存在强互斥约束：同一时间有且仅有一个值为true，切换逻辑是原子操作，合并维护可以保证状态更新的一致性，避免出现多个值同时为true/同时为false的中间异常态
• 合并维护仅需触发一次状态更新，减少不必要的重渲染
• 结构上直接体现三个值的关联关系，后续维护逻辑更清晰

更优的状态设计提示：你完全不需要在state中存储三个布尔值，直接存储当前激活的枚举值（'a' | 'b' | 'c'）即可，需要布尔判断时临时派生，从根源上杜绝状态不一致的可能。

核心切换逻辑补全 #

你原有代码存在几个明显问题：

1. getTrue函数参数类型定义错误，入参应为状态对象而非状态更新函数
2. 循环内调用getTrue传参错误，传入了单个遍历key而非完整状态对象
3. 没有显式定义固定切换顺序，依赖对象key遍历顺序存在隐性风险
4. 没有处理闭环切换逻辑，也没有做初始空状态兜底（初始三个值全为false时第一次点击无对应激活值）

兼容原有状态结构的实现代码 #

// 显式定义固定切换顺序，形成a→b→c→a的闭环
const TOGGLE_SEQUENCE = ['a', 'b', 'c'] as const;
type ToggleType = typeof TOGGLE_SEQUENCE[number];

const [type, setType] = useState<Record<ToggleType, boolean>>({
  a: true, // 初始默认激活a，避免出现三个值全为false的空状态
  b: false,
  c: false
});

const swapType = () => {
  setType(prevState => {
    // 查找当前激活的key
    const currentActive = TOGGLE_SEQUENCE.find(key => prevState[key]);
    const currentIdx = currentActive ? TOGGLE_SEQUENCE.indexOf(currentActive) : -1;
    // 计算下一个激活的key，到末尾后取模回到第一个值形成闭环
    const nextActive = TOGGLE_SEQUENCE[(currentIdx + 1) % TOGGLE_SEQUENCE.length];

    // 生成新状态：仅下一个激活值为true，其余全为false
    return TOGGLE_SEQUENCE.reduce((newState, key) => {
      newState[key] = key === nextActive;
      return newState;
    }, {} as Record<ToggleType, boolean>);
  })
};

推荐的简化实现版本 #

直接存储当前激活key，不冗余存储三个布尔值，代码更简洁，状态更可靠：

const TOGGLE_SEQUENCE = ['a', 'b', 'c'] as const;
type ToggleType = typeof TOGGLE_SEQUENCE[number];

// 直接存当前激活的key，初始值为a
const [activeType, setActiveType] = useState<ToggleType>('a');

const swapType = () => {
  setActiveType(prev => {
    const currentIdx = TOGGLE_SEQUENCE.indexOf(prev);
    return TOGGLE_SEQUENCE[(currentIdx + 1) % TOGGLE_SEQUENCE.length];
  })
};

// 需要布尔值时按需派生即可
const type = {
  a: activeType === 'a',
  b: activeType === 'b',
  c: activeType === 'c'
};

注意：所有状态更新都使用了函数式更新的写法（setType(prev => {})），可以避免闭包捕获旧状态值导致的更新异常。

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