0

我正在对端点进行n次 API 调用，获取数据，将数据放入卡片中，然后返回n数量的卡片。

我希望能够根据卡片本身的属性对卡片进行排序，但到目前为止我一直无法做到这一点。这是我的代码结构；

Name.js - 有一个名称列表并调用 api 组件。

export const Name = () => {
    const names = ["Name1", "Name2", "Name3"];

    return (
        <div>
                {names.map((ele, index) =>
                    <Api key={index} name={ele}/>)}
        </div>
    )

};

Api.js - 使用 React-Query 进行 api 调用并返回一个卡片组件。

export const Api = (props) => {
    const {data, status} = useQuery([ props.name, "ApiCall"], fetchUser);

    return (
        <div>
            {status === "success" && (
                 <Card name={props.name}
                         level={data.stats.attack.level}/>
            )}
        </div>
    )
};

Card.js - Material-ui 风格的卡片，它以漂亮的格式返回 Api 的数据。

export const Card = (props) => {

    return (
        <Card>
            <CardContent>
                <Typography variant="h5" component="h2">
                    {props.name}
                </Typography>
                <Typography variant="body2" component="p">
                    {"Level: " + props.level}
                </Typography>
            </CardContent>
        </Card>
    );
};

如果我想按“级别”数据对返回的卡片进行排序，我假设这段代码会放在 Name.js 文件中，但我不知道它会是什么样子。任何帮助表示赞赏，谢谢。

4

0 回答 0