React Hooks 手风琴嵌套数组切换问题

如何解决React Hooks 手风琴嵌套数组切换问题

大多数角色都有一个手风琴，除了一些（例如第 6 个索引有 2 个手风琴）。单击带有一个手风琴的字符似乎可以以适当的方式切换它们，但是当用户滚动到第 6 个索引时会出现两个手风琴，当您单击其中一个然后滚动到其他字符并单击随机字符时有 1 个手风琴，似乎有 2 个手风琴（第 6 个索引）的字符没有关闭。

我该如何解决这个问题？

最后，我总是想要一个开放式手风琴而不是多台开放式手风琴。

Link to CodeSandBox snippet

export const HomePage: React.FC = () => {
  const [selectedId,setSelectedId] = useState(0);

  const onSelectItem = (selectedItemId: number) => {
    console.log(selectedItemId,index);
    if (selectedId !== selectedItemId) {
      setSelectedId(selectedItemId);
    } else {
      setSelectedId(-1);
    }
  };

  return (
    <div>
      <div>
        {data.characters.results.map((character: { id: number; name: string; image: string; episode: any; }) => (
          <div key={character.id}>
            <Characterheading>{character.name}</Characterheading>
            <CharacterImage src={character.image} alt={character.name} />
            {character.episode.map((char: { name: string; air_date: string; episode: string; characters: any; id: number; },index: number) => (
              <div key={char.id}>
                {char.name}
                {char.air_date}
                {char.episode}
                <AccordionButton
                  onClick={() => onSelectItem(char.id)}
                  open={char.id === selectedId ? true : false}
                >
                  Check all characters
                </AccordionButton>
                <EpisodeListSection
                  open={char.id === selectedId ? false : true}
                >
                  {char.characters.map((ep: { id: number; name: string; image: string; }) => (
                    <EpisodeInfo key={ep.id}>
                      <EpisodeInfoBlock>
                        <EpisodeName>{ep.name}</EpisodeName>
                        <EpisodeImage src={ep.image} alt={ep.name} />
                      </EpisodeInfoBlock>
                    </EpisodeInfo>
                  )
                  )}
                </EpisodeListSection>
              </div>
            )
            )}
          </div>
        )
        )}
      </div>
    </div>
  );
};