Как получить значение из параметров URL в React
Наличие следующего компонента:
import { ChangeEvent, useCallback, useState } from 'react';
export function SearchComponent() {
const [searchValue, setSearchValue] = useState<string>('');
const updateSearchValue = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setSearchValue(event.target.value);
}, []);
return (
<div>
<input value = {searchValue} onChange = {updateSearchValue} />
</div>
);
}
Он обновляет это значение состояния searchValue значением, введенным на входе.
С этим значением URL-адрес обновляется следующим образом:
window.location.hash = searchValue ? `?searchBy=${searchValue}` : '';
Он добавляет дополнительный # к URL-адресу, раньше это было example.com/test, теперь это example.com/test#?searchBy=my_input, но это не большая проблема.
Я хочу иметь возможность напрямую изменять ввод и сохранять это новое значение в компоненте, поэтому я пробовал так:
const queryParams = new URLSearchParams(window.location.search);
const searchBy = queryParams.get('searchBy');
При входе в систему queryParams является пустым объектом, а searchBy — null.
Есть ли способ сохранить значение из URL-адреса, если пользователь собирается редактировать это значение?
Я пытался решить 2 разные проблемы. Первый связан с хешем в URL-адресе, который я хочу удалить, здесь я хочу получить значение из URL-адреса.
Почему вы помещаете то, что принадлежит в window.location.search, в window.location.hash?
Верно, и в обоих случаях не указано, как или где вы пытаетесь использовать состояние searchValue для обновления URL-адреса. ИМО, это будет один и тот же ответ на оба вопроса. После того, как пользователь взаимодействует с вводом и обновляет состояние searchValue, вы хотите, чтобы произошло какая? Что должен инициировать обновление URL-адреса?
если это значение searchValue будет обновлено, оно вызовет новый поиск
Итак, как в хуке useEffect, который обновляет URL-адрес при обновлении состояния searchValue?
точно, это работает правильно, и я не думаю, что это важно для контекста вопроса. на данный момент он обновляет URL-адрес, но добавляет этот дополнительный # (что не является большой проблемой), проблема в том, что он не работает наоборот, когда значение в URL-адресе изменяется, значение состояния не обновлено.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема
Проблема в том, что window.location.hash = searchValue ? `?searchBy=${searchValue}` : ''; обновляет хэш местоположения, таким образом добавляя "#" к URL-адресу, а нет — к window.location.search, который является частью queryString URL-адреса.
Использование window.location также является своего рода анти-шаблоном, поскольку оно изменяет местоположение и вызывает перезагрузку страницы. Лучше использовать инструменты, доступные вам из react-router-dom, чтобы выполнить действие навигации, а не перезагружать все приложение.
Предлагаемое решение
Используя react-router-dom@5, вам нужно будет использовать хуки история использования и использованиеМестоположение, получить доступ к значению location.search и создать свой собственный объект URLSearchParams. Установите начальное состояние searchValue из строки запроса и используйте хук useEffect, чтобы обновить параметры поиска и выполнить императивное перенаправление на текущий маршрут с обновленной строкой запроса.
Пример:
import { useLocation, useHistory } from 'react-router-dom';
export function SearchComponent() {
const history = useHistory();
const { pathname, search } = useLocation();
const searchParams = React.useMemo(() => new URLSearchParams(search), [
search
]);
const [searchValue, setSearchValue] = useState<string>(
searchParams.get("searchBy") || ""
);
useEffect(() => {
searchParams.set("searchBy", searchValue);
history.replace({
pathname,
search: searchParams.toString(),
});
}, [history, pathname, searchParams, searchValue]);
const updateSearchValue = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setSearchValue(event.target.value);
}, []);
return (
<div>
<input value = {searchValue} onChange = {updateSearchValue} />
</div>
);
}
Этот вопрос, по сути, такой же, как и ваш предыдущий вопрос 30 минут назад. Это другой вопрос?