如何用单个函数动态更新React中多个Accordion的状态

你可以创建一个接受Accordion键名的通用函数，利用React的函数式更新机制，基于前一次状态动态修改对应字段的取值，无需为每个组件单独编写更新逻辑：

通用更新函数实现 #

const toggleAccordion = (accordionKey) => {
  // 可选：校验传入的键名是否合法，避免无效操作
  if (!Object.prototype.hasOwnProperty.call(accordionOpen, accordionKey)) {
    console.warn(`无效的Accordion键名：${accordionKey}`);
    return;
  }

  setAccordionOpen(prevState => ({
    ...prevState,
    // 使用计算属性名动态定位要修改的字段
    [accordionKey]: !prevState[accordionKey]
  }));
};

在Accordion组件中使用 #

直接给每个Accordion的触发事件绑定这个函数，并传入对应的状态键名即可：

// 国家来源Accordion
<Accordion
  isOpen={accordionOpen.countryOfOriginAccordion}
  onToggle={() => toggleAccordion('countryOfOriginAccordion')}
>
  {/* 内容 */}
</Accordion>

// 学校Accordion
<Accordion
  isOpen={accordionOpen.schoolAccordion}
  onToggle={() => toggleAccordion('schoolAccordion')}
>
  {/* 内容 */}
</Accordion>

// 学习领域Accordion
<Accordion
  isOpen={accordionOpen.areaOfStudyAccordion}
  onToggle={() => toggleAccordion('areaOfStudyAccordion')}
>
  {/* 内容 */}
</Accordion>

关键说明 #

• 使用计算属性名[accordionKey]实现动态字段修改，让函数可以适配所有Accordion的状态键
• 依赖prevState而非当前的accordionOpen变量，确保每次更新都基于最新的状态快照，避免闭包导致的状态不同步问题
• 可选的键名校验可以提前拦截无效操作，提升代码健壮性

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