Блог

Главная - Вопросы по программированию - React как отсортировать список карточек на основе вызовов API?

React как отсортировать список карточек на основе вызовов API?

#javascript #reactjs #sorting #ecmascript-6 #react-query

#javascript #reactjs #сортировка #ecmascript-6 #реагировать-запрос

Вопрос:

Я делаю 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, а также возвращает компонент card.

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

    return (
        <div>
            {status === "success" amp;amp; (
                 <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 файл, но я понятия не имею, как это будет выглядеть. Любая помощь приветствуется, спасибо.

Комментарии:

1. Сначала вам нужно выполнить все вызовы Api, поместить результирующие объекты данных в массив, отсортировать его по уровню, затем отобразить JSX на основе отсортированного массива. По сути, вам нужно переписать всю структуру. Я не думаю, что выполнение вызова API внутри возвращаемого JSX — хорошая идея в долгосрочной перспективе.

2. @VahidAkhtar Вы изменили значение важного предложения; Я не думаю, что вы должны это делать?

3. @ChrisG прав, я предлагаю вам переместить ваши вызовы API в инкапсулирующий компонент и отсортировать ваши данные там. useQuery Перехват затрудняет извлечение данных (из массива). Если у вас есть контроль над API, вы можете добавить конечную точку для получения всех пользователей в одном запросе.

4. Как говорили мои предшественники, вы должны переместить вызов api в names и сопоставить результаты. В вашей текущей структуре вам пришлось бы передавать результаты запросов обратно родительскому элементу, помещать их в список и затем сортировать его.

5. Вместо того, чтобы получать один компонент card из useQuery, вы можете изменить его, чтобы он принимал массив имен и возвращал массив компонентов card?