Следующая проблема с использованием js useSearchParams, usePathname и useRouter

У меня есть проект Next.js, где пользователи могут загружать свойства и применять различные фильтры, такие как удобства, minPrice, maxPrice и т. д.

Я создал специальный крючок для сброса определенных параметров запроса, когда пользователь нажимает кнопку «Сбросить фильтр». Однако после сброса фильтров некоторые параметры по-прежнему отображаются в URL-адресе, хотя в журналах указано, что они были удалены. Вот мой код

'use client';
import {
  useSearchParams,
  usePathname,
  useRouter,
} from 'next/navigation';

export function useFilterReset(onClose: () => void) {
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();

  const handleResetFilter = () => {
    const params = new URLSearchParams(searchParams.toString());
    params.delete('minPrice');
    params.delete('maxPrice');
    console.info('************** propertyType **************');
    console.info('############# BEFORE DELETE ################');
    console.info(params.get('propertyType'));
    params.delete('propertyType');
    console.info('############# AFTER DELETE ################');
    console.info(params.get('propertyType'));

    console.info('************** amenities **************');
    console.info('############# BEFORE DELETE ################');
    console.info(params.get('amenities'));
    params.delete('amenities');
    console.info('############# AFTER DELETE ################');
    console.info(params.get('amenities'));
    router.replace(pathname + '?' + params);
    // onClose();
  };

  return {
    handleResetFilter,
  };
}

Предположим, что исходный URL-адрес:

http://localhost:3000/properties/map?lat=-26.2476095&lng=28.0873945&neLat=-26.24251187946654&neLng=28.09495803486075&swLat=-26.25713408434988&swLng=28. 08018899408635&keywords=india&radios=&placeId=ChIJmeflRr8PlR4RWvO2jWjKfwE&address=South+Hills%2C+Йоханнесбург+Юг %2C+Юг+Африка&amenities=на открытом воздухе+пространство%2Cсушилка%2Домашние животные+разрешены%2Прачечная+в+здании%2Cмеблирована%2Cкрытая+парковка%2Лифт%2Стиральная машина%2Печь&propertyType=квартира%2Дом%2CТаунхаус

При выполнении функции сброса фильтра журналы показывают, что параметры propertyType и удобств удалены правильно:

**************Тип недвижимости **************

############# ПЕРЕД УДАЛЕНИЕМ ################

квартира, дом, таунхаус

############# ПОСЛЕ УДАЛЕНИЯ ################

нулевой

************** удобства **************

############# ПЕРЕД УДАЛЕНИЕМ ################

открытая площадка, сушилка, домашние животные разрешены, прачечная в здании, с мебелью, крытая парковка, лифт, стиральная машина, плита

############# ПОСЛЕ УДАЛЕНИЯ ################

нулевой

однако после выполнения функции URL-адрес все еще содержит параметр удобств:

http://localhost:3000/properties/map?lat=-26.2476095&lng=28.0873945&neLat=-26.24251187946654&neLng=28.09495803486075&swLat=-26.25713408434988&swLng=28. 08018899408635&keywords=india&radios=&placeId=ChIJmeflRr8PlR4RWvO2jWjKfwE&address=South+Hills%2C+Йоханнесбург+Юг %2C+Юг+Африка&amenities=на открытом воздухе+пространство%2Cсушилка%2Домашние животные+разрешены%2Прачечная+в+здании%2Cмеблирована%2Cкрытая+парковка%2Лифт%2Стиральная машина%2Печь

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
70
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я вижу три варианта:

  • либо params каким-то образом всё равно возвращает amenities при преобразовании в строку (попробуйте console.info(pathname + '?' + params) прямо перед навигацией),
  • или, возможно, вы выполняете какую-то другую навигацию где-то еще,
  • или навигация играет с вами какие-то фокусы...

Попробуйте изменить replace на push везде и обязательно внимательно просмотрите историю посещений, чтобы увидеть, сможете ли вы найти там правильные URL-адреса.

Вы правы. Проблема была связана с логикой навигации, записанной в другом фильтре сброса.

abuzain 15.06.2024 08:06

Попробуй это

const [searchParams, setSearchParams] = useSearchParams();
setSearchParams({});

Другие вопросы по теме