Применение фильтра при перенаправлении ссылок с помощью React.JS и Umi.JS

Недавно я работал над проектом (который построен с использованием ReactJS, а маршрутизация основана на Umi.JS). И у меня возник сценарий, в котором я создал страницу статистики (на которой я показываю количество каждого типа данных определенной категории), а затем мне нужно создать кнопку для каждой категории, которая должна переходить на страницу этой категории (используя history.push()).

Изначально, когда я нажимаю на кнопку «Просмотр жалоб», она просто переводит меня на страницу жалоб.

Теперь я хочу сделать так: когда я нажимаю на кнопку «View Complaints», то вместо того, чтобы просто переместить историю на эту конкретную страницу, она должна даже передать конкретный branchId как query, который будет вести себя как фильтр на переведенной странице (странице жалоб).

Что я сделал?

Сначала я сосредоточился на кнопке, которую нужно нажать, то есть на странице «Просмотр жалоб».

Сначала код моей кнопки выглядел следующим образом…

 <Button
  type="primary"
  onClick={(event) => {
  event.stopPropagation();
  history.push(`/complaints/all`);
  }}>
  View Complaints
 </Button>
Войти в полноэкранный режим Выйти из полноэкранного режима

Поскольку я уже упоминал, что для применения фильтра мне нужно отправить branchId в качестве запроса, мне пришлось отправить запрос с путем внутри history.push() и теперь это выглядит следующим образом.

<Button
type="primary"
onClick={(event) => {
event.stopPropagation();
history.push({
pathname: `/complaints/all`,
query: {
branchId: profileId,
  },
 });
}}>
View Complaints
</Button>
Вход в полноэкранный режим Выход из полноэкранного режима

и теперь с этой штукой, она будет передавать запрос, когда вы нажмете на кнопку.

Но это все еще не применит фильтр, и для этого мне нужно передать запрос в функцию filter, которая в конечном итоге получает отфильтрованные данные из API.

import { useLocation } from 'umi';

const { pathname, query: branchQuery } = useLocation();
Вход в полноэкранный режим Выход из полноэкранного режима

и затем я вызываю запрос внутри функции, в которой мы отправляем API с запросом в качестве полезной нагрузки.

const getFinishedComplaints = () => {
    let query = {
      statusId: 'CRQ_CLOSED',
      customerId: currentUser?.personal_details?.organizationDetails?.orgPartyId,
      keyword: searchText,
      startIndex: completeStartIndex,
      viewSize: completeViewSize,
    };

    if (branchQuery?.branchId) {
      query = { ...query, branchId: branchQuery?.branchId };
    }

    dispatch({
      type: 'product/getFinishedComplaints',
      payload: {
        query,
      },
    });
  };
Вход в полноэкранный режим Выход из полноэкранного режима

Таким образом, вы можете легко применить функциональность фильтра, передав запрос с помощью history.push() из Umi.js.

Альтернативный способ

Вы даже можете использовать react-router-dom для вышеуказанной функциональности.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *