Как удалить прослушиватель событий, чтобы он не пытался обновлять состояние при отключении компонента?

Я установил несколько динамических стилей, и все работает нормально, кроме случаев, когда компонент отключен. Затем возникает ошибка: невозможно вызвать 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.log("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;
    });
  }

react-native reactjs javascript react-native-navigation
person FatBoyGebajzla    schedule 10.10.2018    source источник

Ответы (2)


arrow_upward
7
arrow_downward

вы должны создать именованную функцию (если быть точным, 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.log("Unmounted");

    Dimensions.removeEventListener("change", this.fun_name);
  }

PS: не забудьте привязать функцию

person evgeni fotia    schedule 10.10.2018
comment
Браво! Вот что мне нужно! Это действительно решает мою проблему! Спасибо evgeni fotia !!! Но я до сих пор не понимаю его полностью ... Ваш код почти такой же, как мой ... Почему тогда мой код не работает, а ваш - нет? Tnx снова. - person FatBoyGebajzla; 10.10.2018
comment
@FatBoyGebajzla проверьте здесь w3schools.com/jsref/met_element_removeevent readlistener.inasp и использование, и вы поймете - person evgeni fotia; 10.10.2018
comment
Спасибо, я этого не знал. - person FatBoyGebajzla; 10.10.2018

arrow_upward
2
arrow_downward

Определите функцию отдельно, чтобы добавить / удалить слушателя для этой конкретной функции. также добавить слушателей после того, как компонент был смонтирован, чтобы избежать установки состояния на размонтированном компоненте

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;
}
person Jesús    schedule 10.10.2018