React useState实现的手风琴点击后无法正常展开问题求助

问题出在handler函数的逻辑上，当前逻辑仅支持“全关闭/打开单个项”的切换，无法实现“切换到另一项展开”的需求：

当前逻辑代码：

const handler = (index) => {
  setActiveAccordion(currentItem => currentItem === -1 ? index : -1);
};

这段代码的逻辑是：如果当前没有展开的项（currentItem === -1），就打开点击的项；否则无论点击哪个项，都会直接关闭所有展开项。所以当已有项展开时，点击其他项只会关闭现有展开项，无法打开新的项。

修复后的逻辑 #

调整handler函数，判断点击的索引是否为当前激活项：

• 若点击的是已展开项，就关闭它（设为-1）
• 若点击的是未展开项，就激活当前点击的索引（自动关闭之前的展开项）

修改后的代码：

const handler = (index) => {
  setActiveAccordion(currentItem => currentItem === index ? -1 : index);
};

修改后可实现：

• 点击未展开项：关闭已展开项，打开当前项
• 点击已展开项：关闭当前项

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