У меня есть задача, связанная с адресной строкой и отслеживанием ее изменений. Мне это нужно для того, чтобы менять адресную строку или брать из нее данные для запросов. Я столкнулся с проблемой при работе с хуком UseEffect и глобальным событием ветра. Для меня это оказалась очень странная ситуация. Ниже приведены несколько вариантов.
1 вариант. Я делаю window.history.pushState. У меня есть поиск, но хук зависимостей для этих изменений не работает.
const [testState, setTestState] = useState(false);
useEffect(() => {
console.log('search changed.', window.location.search)
}, [window.location.search])
const testChangeLocation= () => {
window.history.pushState(
{},
"add test searchURL ",
`${window.location.href}/?testParams`
);
}
Вариант 2. Делаю то же, что и в варианте 1, но также меняю любое состояние использования в компоненте. С таким набором работает useEffect.
const [testState, setTestState] = useState(false);
useEffect(() => {
console.log('search changed.', window.location.search)
}, [window.location.search])
const testChangeLocation= () => {
window.history.pushState(
{},
"add test searchURL ",
`${window.location.href}/?testParams`
);
setTestState(!testState)
}
3 вариант - делаю то же что и во втором варианте, но отменяю зависимость и тогда хук не срабатывает.
const [testState, setTestState] = useState(false);
useEffect(() => {
console.log('search changed.', window.location.search)
}, [])
const testChangeLocation= () => {
window.history.pushState(
{},
"add test searchURL ",
`${window.location.href}/?testParams`
);
setTestState(!testState)
}
Оказывается, мой хук действительно отслеживает изменения в window .location.search. но только в том случае, если в функции изменилось что-то еще, даже если это не имело никакого отношения к моему useEffect. Я не понимаю, почему он работает именно так, и почему мой 1-й вариант не хочет работать и отслеживаться. Я надеюсь, что сообщество поможет мне разобраться в этой ситуации. Поэтому кто может - объясните , пожалуйста почему это именно так происходит и стоит ли вообще работать с window в этой ситуации?
Простой