在 react.js 中，为什么总是抛出 'setState(...): Can only update amounted 或mounting component...... 错误？答案

【问题标题】：In react.js ,why always throw ' setState(...): Can only update a mounted or mounting component...... error?在 react.js 中，为什么总是抛出 'setState(...): Can only update amounted 或mounting component...... 错误？
【发布时间】：2025-11-25 01:55:01
【问题描述】：

在以下代码中，在componentWillUnmount 上，我删除了滚动事件侦听器，但开发工具总是抛出以下错误：

setState(...)：只能更新一个挂载或挂载的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。请检查未定义组件的代码。

代码：

render () {
    let opa=!this.state.opa?
        {
            backgroundColor:'#fff',
            borderBottom:'.01rem solid #e8e8e8'
        }:null;
    return (
        <div id='search' style={opa}>
            <input type='text' placeholder=''/>
            <div id='ser_scan'></div>
        </div>
    )
}

toggle_opa () {
    let opa;
    let _top=~~(document.body.scrollTop*100/parseInt(document.documentElement.style.fontSize,10))
    opa=_top>=215?false:true;
    console.log(1)
    this.setState({opa})
}

componentDidMount() {
    document.addEventListener('scroll',this.toggle_opa.bind(this));
}

componentWillUnmount() {
    console.log(1231)
    document.removeEventListener('scroll',this.toggle_opa)
}

怎么了？

【问题讨论】：

我相信你在 toggle_opa 中用于 setState 的变量 opa 不是一个对象。你也确定，你在使用 setState 之前启动状态
你试过了吗。 document.removeEventListener('scroll',this.toggle_opa.bind(this))。错误是因为组件未卸载。

标签： javascript reactjs

【解决方案1】：

您的事件监听器永远不会被正确删除，所以我猜您在卸载组件后滚动时会收到错误消息。

首先，通过在组件内添加构造函数，确保toggle_opa 始终绑定到this

constructor(props) {
  super(props);
  this.toggle_opa = this.toggle_opa.bind(this);
}

然后你可以像这样添加和删除事件监听器：

componentDidMount() {
    document.addEventListener('scroll',this.toggle_opa);
}

componentWillUnmount() {
    console.log(1231)
    document.removeEventListener('scroll',this.toggle_opa)
}

【讨论】：

谢谢你的回答，这个问题已经解决了。非常感谢

【解决方案2】：

问题是因为您使用的是绑定方法。它包含一个新函数，因此您在 didMount 中添加的处理程序与您发送到 removeListener 的处理程序不同。您可以在定义处理程序时使用箭头函数，如下所示 - toggle_opa =()=>{......} 然后只需将 toggle_opa 传递给添加/删除侦听器调用。无需绑定。

【讨论】：