当我单击卡片时，我无法一次翻转一张卡片，我正在使用自己创建的 API.json，我在 ReactJS 中执行此操作，并且我使用地图滚动列表。

当我单击卡片时，我无法一次翻转一张卡片，我正在使用自己创建的 API.json，我在 ReactJS 中执行此操作，并使用地图滚动列表。这里找到的解决方案不适合我。

我附加了一个 GIF 并将我的代码片段放在下面：

代码（位于 PT-BR）：

export default function Card () {

    const [cards, setCards] = useState([]);
    const [flip, setFlip] = useState(false);
   
    const getCard = async() => {
        try {
            const response = await axios.get("The API is working")

            const data = response.data
            setCards(data)
        }  catch (error) {
            console.log(error)
        }
    }
    useEffect(() => {
       getCard()
      
    },[])

    return (
        <Section>
            <Nav>
                <button><Link to='/'><img src={setaEsquerda}/></Link></button>
                <h1>Começando pela nossa <span>estrela!</span></h1>
                <button><Link to='#'><img src={setaDireita}/></Link></button>
            </Nav>
                      
            <Main>  
                {cards.map((card) => {
                    return (
                    <div className={`card ${flip? "flip" : "flip-front"}`} key={card.id}>
                       <Front onClick={() => setFlip(!flip)}>
                            <img src={card.imagemUrl} />
                        </Front> 
                        <Back onClick={() => setFlip(!flip)}> 
                            <h1>{card.nome}</h1>
                            <p>{card.descricao}</p>
                        </Back>
                    </div>
                    )
                })}
            </Main>  
        </Section> 
    ) 
}

JSON：

[
    {
        "id": 1,
        "nome": "Sol",
        "descricao": "O sol é uma estrela que existe a 4,6 bilhões de anos e é o maior corpo celeste do sistema solar, contendo 99,86% de sua massa, devido a isso os planetas e demais corpos orbitam em sua volta. É formado principalmente por hélio e hidrogênio, possui 6 camadas e a última se chama núcleo, onde acontece as reações nucleares e há emissão de luz e geração de calor para os demais planetas, calor esse fundamental para a manutenção da vida na terra. O sol é 110 vezes maior que à terra e está a 150 milhões de distância do nosso planeta natal, a luz solar demora 8 minutos e 20 segundos para chegar na superfície da terra.",
        "imagemUrl": ""

    },
    {
        "id": 2,
        "nome": "Mercúrio ",
        "descricao": "Mercúrio é o menor planeta do sistema solar, o segundo mais denso e o mais próximo do sol, seu núcleo corresponde a 75% de sua massa, acreditasse que Mercúrio era um planeta enorme que foi sendo transportado para perto do sol, se chocando com outros corpos celestes no caminho que afetaram sua estrutura, possui instabilidade climática, baixas e altas temperaturas que variam de 420° C a -173° C. Os ventos solares dificultam a presença de atmosfera, satélites naturais e anéis. Apesar de sua proximidade com o sol, suas crateras não recebem muita iluminação devido à falta de uma inclinação como à Terra, possibilitando a formação de gelo durante a noite, devido a sua baixa translação, Mercúrio não possui estações do ano.",
        "imagemUrl": ""

    },
    {
        "id": 3,
        "nome": "Vênus",
        "descricao": "Vênus é o segundo planeta do sistema solar, existe a 300-600 milhões de anos, é o segundo corpo celeste mais brilhante do céu, ficando atrás somente do Sol  e apesar de não ser o planeta mais próximo do sol, é o mais quente, sua superfície chega a 482 °C devido aos componentes do planeta que gera o efeito estufa. Falando em componentes, 97% da sua composição atmosférica é feita de dióxido de carbono e assim como Mercúrio, Vênus também não possui satélites naturais. Ele é considerado um planeta irmão da terra, devido a suas afinidades, ambos são terrestres e possuem tamanho, massa e composição semelhantes, porém, possuem aspectos únicos, como condições para a proliferação de vida e a atmosfera de Vênus é 92 vezes mais densa que a da Terra.",
        "imagemUrl": ""

    },

 ....

]

我尝试更改索引，但遇到了同样的问题：

 <Main>  
                {cards.map((card, index) => {
                    return (
                    <div className={`card ${flip? "flip" : "flip-front"}`} key={`card-${index}`}>
                       <Front onClick={() => setFlip(!flip)}>
                            <img src={card.imagemUrl} />
                        </Front> 
                        <Back onClick={() => setFlip(!flip)}> 
                            <h1>{card.nome}</h1>
                            <p>{card.descricao}</p>
                        </Back>
                    </div>
                    )
                })}
            </Main>  
        </Section>