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

【问题标题】：Clicked accordion not expanding when clicked with React's useState使用 React 的 useState 单击时单击的手风琴未展开
【发布时间】：2022-07-22 11:27:03
【问题描述】：

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

谁能发现我的代码中的问题？

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

【问题讨论】：

标签： javascript reactjs accordion use-state

【解决方案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
};

【讨论】：