Как удалить прослушиватель событий, чтобы он не пытался обновлять состояние при отключении компонента?
Я установил несколько динамических стилей, и все работает нормально, кроме случаев, когда компонент отключен. Затем возникает ошибка: невозможно вызвать setState (или forceUpdate) на отключенном компоненте.
Это второй экран в навигаторе стека, когда я перехожу к третьему, все в порядке, но когда я перехожу к первому и компонент отключен, он выдает ошибку.
Я попытался удалить прослушиватель событий в componentWillUnmount, но безуспешно, видимо, я делаю что-то не так.
Кроме того, я пробовал использовать этот подход this.props.navigation.isFocused (), и снова он работает нормально, но затем, если я нахожусь на третьем экране и вращаю устройство и возвращаюсь назад, прослушиватель событий Dimensions не видит изменений и стиля бардак.
Итак, как я могу остановить прослушиватель событий, когда компонент отключен?
Заранее спасибо.
constructor(props) {
super(props);
Dimensions.addEventListener("change", dims => {
// this.props.navigation.isFocused() ?
this.setState({
resStyles: {
imageFlex: Dimensions.get("window").height > 500 ? "column" : "row",
imageHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
infoHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
infoWidth: Dimensions.get("window").height > 500 ? "100%" : "50%"
}
});
// : null;
});
}
componentWillUnmount
componentWillUnmount() {
console.info("Unmounted");
Dimensions.removeEventListener("change", dims => {
// this.props.navigation.isFocused() ?
this.setState({
resStyles: {
imageFlex: Dimensions.get("window").height > 500 ? "column" : "row",
imageHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
infoHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
infoWidth: Dimensions.get("window").height > 500 ? "100%" : "50%"
}
});
// : null;
});
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
вы должны создать именованную функцию (если быть точным, Methode), подобную этой
fun_name(){
// this.props.navigation.isFocused() ?
this.setState({
resStyles: {
imageFlex: Dimensions.get("window").height > 500 ? "column" : "row",
imageHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
infoHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
infoWidth: Dimensions.get("window").height > 500 ? "100%" : "50%"
}
});
// : null;
}
constructor(props) {
super(props);
Dimensions.addEventListener("change", this.fun_name);
}
componentWillUnmount() {
console.info("Unmounted");
Dimensions.removeEventListener("change", this.fun_name);
}
PS: не забудьте привязать функцию
@FatBoyGebajzla проверьте здесь w3schools.com/jsref/met_element_removeeventlistener.asp прочтите примечание в разделе «Определение и использование», и вы поймете
Спасибо, я этого не знал.
Определите функцию отдельно, чтобы добавить / удалить слушателя для этой конкретной функции. также добавить слушателей после того, как компонент был смонтирован, чтобы избежать установки состояния на размонтированном компоненте
componentDidMount () {
Dimensions.addEventListener('change', updateDimensions)
}
componentWillUnmount() {
Dimensions.removeEventListener('change', updateDimensions)
}
updateDimensions() {
this.props.navigation.isFocused() ?
this.setState({
resStyles: {
imageFlex: Dimensions.get('window').height > 500 ? 'column' : 'row',
imageHeight: Dimensions.get('window').height > 500 ? '50%' : '100%',
infoHeight: Dimensions.get('window').height > 500 ? '50%" : '100%',
infoWidth: Dimensions.get('window').height > 500 ? '100%' : '50%'
}
});
: null;
}
Браво! Это то, что мне нужно! Это действительно решает мою проблему! Спасибо evgeni fotia !!! Но я до сих пор не до конца понимаю ... Ваш код почти такой же, как мой ... Почему тогда мой код не работает, а ваш - нет? Tnx снова.