如何为React自定义toggle钩子设置默认状态并解决首次双击问题

问题根因 #

首次点击不生效的核心原因是状态值和默认显示逻辑不匹配：
初始状态isChevronUp为空对象，你通过判断对象为空强制返回true作为展开状态，但第一次触发handleChevron时，previousState[id]为undefined，!undefined的计算结果是true，等于把当前id的状态设为和默认展示一致的true，所以界面无变化，第二次点击才会切换为false，就出现了需要双击的问题。你新增default字段的方案也没有解决「首次点击时状态计算逻辑和默认值不同步」的核心问题，同时原方案判断整个对象是否为空的逻辑，在多容器场景下会导致只要一个容器被点击，其他所有未点击的容器都会自动关闭，不符合状态独立的要求。

最优解决方案 #

只需调整两处逻辑即可解决所有问题：

1. 修正useChevron hook的状态切换逻辑 #

在状态取反时统一把未存储的id默认值按true计算，保证首次点击直接从true切换为false

2. 简化组件isOpen判断逻辑 #

不用判断整个状态对象是否为空，直接对单个id的状态做兜底，不存在时默认返回true，保证多容器状态完全独立

完整修改后的代码 #

useChevron hook

import { useState } from 'react';

// 定义类型避免any的不安全问题
type ChevronState = Record<string, boolean>

const useChevron = () => {
  const [isChevronUp, setIsChevronUp] = useState<Partial<ChevronState>>({});

  const handleChevron = (id: string) => {
    setIsChevronUp((previousState) => ({
      ...previousState,
      // 未存储的id默认按true计算，首次点击直接取反为false
      [id]: !(previousState[id] ?? true),
    }));
  };

  return { isChevronUp, handleChevron };
};

export default useChevron;

组件调用代码

// 模板组件内
...
const { handleChevron, isChevronUp } = useChevron();
...

<div id="containerOne">
  <ChevronButton
    // 对应id无状态时默认返回true，默认朝上
    isOpen={isChevronUp.containerOne ?? true} 
    id='containerOne'
    onClick={() => handleChevron('containerOne')}
  />
</div>
<Accordion isOpen={isChevronUp.containerOne ?? true}>
  <ChildrenComponent1 />
  <ChildrenComponent2 />
  ...
</Accordion>

{/* 多容器场景直接复用即可，状态完全独立 */}
<div id="containerTwo">
  <ChevronButton
    isOpen={isChevronUp.containerTwo ?? true} 
    id='containerTwo'
    onClick={() => handleChevron('containerTwo')}
  />
</div>
<Accordion isOpen={isChevronUp.containerTwo ?? true}>
  ...
</Accordion>

如果你的项目运行环境不支持ES2020的空值合并运算符??，可将?? true替换为三元判断typeof isChevronUp.xxx === 'boolean' ? isChevronUp.xxx : true，效果完全一致。

方案优势 #

• 彻底解决首次双击问题：第一次点击直接从默认展开切换为收起，单次点击即可生效
• 多容器状态完全独立：新增任意数量accordion都无需修改hook逻辑，每个容器默认都是展开状态，互不影响
• 逻辑简洁无冗余：无需额外新增default字段，也不需要判断整个状态对象的长度/是否为空，减少无效判断
• 类型安全：去掉any类型，提前定义状态结构避免类型隐患

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