javascript - 如何让卡片一张张出现？

Question

我有这个代码：

import React, { useState } from 'react';
import PropTypes from "prop-types";
import { Div, Panel, Button, PanelHeader } from "@vkontakte/vkui"
import TinderCard from 'react-tinder-card'

const Home = ({ id, go, sortUsersData }) => {

    const dataArray = sortUsersData;

    const [lastDirection, setLastDirection] = useState()

    const swiped = (direction, nameToDelete) => {
        console.log('removing: ' + nameToDelete)
        setLastDirection(direction)
    }

    const outOfFrame = (name) => {
        console.log(name + ' left the screen!');
    }

    return (
        <Panel id={id}>
            <PanelHeader>Title</PanelHeader>
            <Div>
                <div className='cardContainer'>
                    {
                        dataArray.map((character) =>
                            <TinderCard className="swipe" key={character.first_name} onSwipe={(dir) => swiped(dir, character.first_name)} onCardLeftScreen={() => outOfFrame(character.name)} preventSwipe={["up", "down"]}>
                                <div style={{ backgroundImage: "url(" + character.image + ")" }} className="card">
                                    <h3 class="name">{character.first_name}</h3>
                                    <h2 class="age">{character.distance} лет</h2>
                                    <h1 class="bio">{character.bio}</h1>
                                </div>
                            </TinderCard>
                        )
                    }
                </div>
                {lastDirection ? <h2 className="infoText">You swiped {lastDirection}</h2> : <h2 className="infoText"/>}
            </Div>
        </Panel>
    );
};

export default Home;

当我运行它时，我看到了所有的卡片，但我想知道如何让它们按顺序出现。当我从屏幕上刷一张卡时，会加载另一张卡。我想这样做是因为当我有一个非常大的阵列时，它开始工作得非常缓慢。

谢谢！！

标签： javascriptreactjs