点击的手风琴在使用状态时不展开

Question

我有一个手风琴，它可以按照我需要的方式工作，除了一件事。单击其中一个手风琴项目后，如果单击另一个折叠的项目，则打开的项目将关闭，但刚刚单击的项目将不会打开。

有人能在我的代码中发现问题吗？

const [activeAccordion, setActiveAccordion] = useState(-1);
const handler = (index) => {
setActiveAccordion(currentItem => currentItem === -1 ? index : -1);
};
// relevant section of code below...
{ items.map((e, c) => {
return (
<div key={`key${c}`}>
<button className={styles.accordionButton} onClick={() => handler(c)}>
{e.name}
</button>
{activeAccordion === c &&
<div className={`${styles.accordionContent}`}>

Answer 1

您在handler中有一个小问题。您没有将新项目设置为新打开的项目，而是选中currentItem === -1，它会将activeAccordion设置回-1(关闭所有手风琴(

对于修复，您可以将其更改为

const handler = (index) => {
const isOpen = index === activeAccordion
setActiveAccordion(isOpen ? -1 : index); //if it's open, we set -1 to close it
};