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