8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

翻牌无反应同时转动

bartolo-otrit 1月前

13 0

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

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

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

enter image description here

代码(位于 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> 
帖子版权声明 1、本帖标题:翻牌无反应同时转动
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由bartolo-otrit在本站《api》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 您需要存储卡片 ID 状态来区分哪张卡片被翻转,而不是仅仅存储真或假。

    您可以这样做。这里 -1 是默认状态,表示没有翻转卡片。一旦翻转,状态将具有翻转的卡片 ID。

    export default function Card () {
        const [cards, setCards] = useState([]);
        const [flip, setFlip] = useState(-1);
       
        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 === card.id ? "flip" : "flip-front"}`} key={card.id}>
                           <Front onClick={() => setFlip(card.id)}>
                                <img src={card.imagemUrl} />
                            </Front> 
                            <Back onClick={() => setFlip(-1)}> 
                                <h1>{card.nome}</h1>
                                <p>{card.descricao}</p>
                            </Back>
                        </div>
                        )
                    })}
                </Main>  
            </Section> 
        ) 
    }
    
返回
作者最近主题: