使用 React 的 useState 单击时单击的手风琴未展开

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
};