如何删除事件侦听器，以便在卸载组件时不会尝试更新状态？答案

【问题标题】：How can I remove event Listener so it would not try to update state when component is unmounted?如何删除事件侦听器，以便在卸载组件时不会尝试更新状态？
【发布时间】：2018-10-10 14:38:26
【问题描述】：

我设置了一些动态样式，除了卸载组件外，一切正常。然后它会抛出一个错误：Can't call setState (or forceUpdate) on an unmounted component。

这是堆栈导航器中的第二个屏幕，当我转到第三个时，一切都很好，但是当我转到第一个并且组件被卸载时，它会引发错误。

我试图删除 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;
    });
  }

【问题讨论】：

标签： javascript reactjs react-native react-native-navigation

【解决方案1】：

你应该像这样创建一个命名函数（准确地说是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：别忘了绑定函数

【讨论】：

太棒了！这就是我所需要的！这实际上解决了我的问题！非常感谢evgeni fotia！！！但是我仍然没有完全理解...您的代码与我的代码几乎相同...为什么我的代码不起作用而您的代码起作用？再次Tnx。
@FatBoyGebajzla 在这里查看w3schools.com/jsref/met_element_removeeventlistener.asp 阅读“定义和用法”中的说明，您就会明白
谢谢，我不知道。

【解决方案2】：

单独定义一个函数，以添加/删除该特定函数的侦听器。安装组件后还添加侦听器，以避免在未安装的组件上设置状态

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;
}

【讨论】：