问题描述
大多数角色都有一个手风琴,除了一些(例如第 6 个索引有 2 个手风琴)。单击带有一个手风琴的字符似乎可以以适当的方式切换它们,但是当用户滚动到第 6 个索引时会出现两个手风琴,当您单击其中一个然后滚动到其他字符并单击随机字符时有 1 个手风琴,似乎有 2 个手风琴(第 6 个索引)的字符没有关闭。
我该如何解决这个问题?
最后,我总是想要一个开放式手风琴而不是多台开放式手风琴。
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>
);
};
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)