Javascript removeEventListener在componentWillUnmount中调用时不工作

我正在尝试

setState（）

，以便在调整窗口大小时，在设置为组件状态的不同屏幕大小上呈现不同数量的项目。我在组件挂载时添加了一个事件侦听器，在卸载时将其删除

componentDidMount()
{
    this.updateValue();
    window.addEventListener("resize", this.updateValue.bind(this));
}

updateValue()
{
    var windowWidth = window.screen.width;
    if(windowWidth <= 991 && windowWidth >= 768){
        this.setState({ items:6 })
    } else if(windowWidth <= 767 && windowWidth >= 479){
        this.setState({ items:4 })
    } else if( windowWidth < 480 && windowWidth >= 359){
        this.setState({ items:2 })
    } else if( windowWidth < 360){
        this.setState({ items: 2})
    } else {
        this.setState({items:12})
    }
}

componentWillUnmount()
{
    window.removeEventListener("resize", this.updateValue.bind(this));
}

componentDidMount（）
{
this.updateValue（）；
addEventListener（“resize”，this.updateValue.bind（this））；
}
updateValue（）
{
var windowWidth=window.screen.width；
如果（窗宽=768）{
this.setState（{items:6}）
}否则如果（窗宽=479）{
this.setState（{items:4}）
}否则如果（windowWidth<480&&windowWidth>=359）{
this.setState（{items:2}）
}否则如果（窗宽<360）{
this.setState（{items:2}）
}否则{
this.setState（{items:12}）
}
}
组件将卸载（）
{
removeEventListener（“resize”，this.updateValue.bind（this））；
}

当我在安装组件的路线上时，工作正常；直到我通过打开另一条管线并调整窗口大小（当我收到错误时）离开组件：

警告：设置状态（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是禁止操作。请检查FeaturedRestarants组件的代码

当我调整屏幕大小时，一秒钟内会出现100个错误

---

显然，

removeEventListener

不起作用。我哪里出错了？

尝试执行以下操作：

componentDidMount()
{
    this.updateValue();
    window.addEventListener("resize", this.updateValue);
}

updateValue = () =>
{
    var windowWidth = window.screen.width;
    if(windowWidth <= 991 && windowWidth >= 768){
        this.setState({ items:6 })
    } else if(windowWidth <= 767 && windowWidth >= 479){
        this.setState({ items:4 })
    } else if( windowWidth < 480 && windowWidth >= 359){
        this.setState({ items:2 })
    } else if( windowWidth < 360){
        this.setState({ items: 2})
    } else {
        this.setState({items:12})
    }
}

componentWillUnmount()
{
    window.removeEventListener("resize", this.updateValue);
}

componentDidMount（）
{
this.updateValue（）；
window.addEventListener（“resize”，this.updateValue）；
}
updateValue=（）=>
{
var windowWidth=window.screen.width；
如果（窗宽=768）{
this.setState（{items:6}）
}否则如果（窗宽=479）{
this.setState（{items:4}）
}否则如果（windowWidth<480&&windowWidth>=359）{
this.setState（{items:2}）
}否则如果（窗宽<360）{
this.setState（{items:2}）
}否则{
this.setState（{items:12}）
}
}
组件将卸载（）
{
removeEventListener（“resize”，this.updateValue）；
}

必须将与第二个参数相同的函数传递给addEventListener/removeEventListener。当您传递this.updateValue.bind（this）时，实际上是在创建一个新函数，因此这两个函数并不相同。

---

相反，将updateValue转换为箭头符号，将

this

保留为类的

this

，然后您可以向同一个函数发送两次引用。

我认为您只需要在构造函数中绑定函数一次。 由于.bind（）返回一个新的函数对象，removeEventListener不会删除您创建的初始事件侦听器函数