Отписаться от прослушивателя событий
В компоненте реакции на основе классов вы можете просто сделать;
componentWillUnmount() {
window.removeEventListener('resize', this.resizeHandler);
}
Хотя я не уверен, как это сделать в функциональном компоненте с React Hooks?
В моем приложении я выполняю функцию ниже при нажатии кнопки в компоненте LoginCard.
const handleLogin = (email, password) => {
loginService.login(email, password)
.then((response) => {
if (!response.error) {
props.history.push("/");
}
});
}
И я оборачиваю экспорт LoginCard в функцию withRouter из react-router-dom для перенаправления на адрес маршрута.
export default withRouter(LoginCard);
Внутри компонента LoginCard у меня есть компонент Tabs, у которого есть прослушиватель событий в хуке useEffect.
useEffect(() => {
setUnderLineStyle(getUnderlineStyle());
window.addEventListener("resize", _.throttle(() => {
setUnderLineStyle(getUnderlineStyle())},
300),
{passive:true});
}, [props]);
Однако, когда я нажимаю эту кнопку в LoginCard и получаю перенаправление на /, а затем изменяю размер окна, вызывается функция внутри списка событий изменения размера setUnderLineStyle(getUnderlineStyle()).
Я попытался добавить следующее в useEffect, но setUnderLineStyle(getUnderlineStyle()) все еще вызывается при изменении размера.
return () => window.removeEventListener("resize", _.throttle(() => {
setUnderLineStyle(getUnderlineStyle())},
300),
{passive:true});
Есть идеи? Даже вокруг лучшего метода перенаправления, чтобы добраться до / через react-router-dom или как эффективно отписаться от прослушивателей событий?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Сделайте второй useEffect исключительно для использования размонтирования. Пустые зависимости в useEffect заставляют его эффективно функционировать как componentDidMount, а возврат этого эффективно работает как componentWillUnmount.
useEffect(() => {
// Do mounting stuff here
return () => {
// Do unmounting stuff here
};
}, []);
Я думаю, что в вашем ответе отсутствует обратный вызов useEffect( () => {}, []);