阵营JS - 一个事件监听

Question

我试图更新EventListener的在我的组件的状态中更新状态。我得到以下控制台错误：

“警告：的setState（...）：只能更新一安装或安装组件。这通常意味着您在卸载的组件上调用了setState（）。这是一个没有操作。请检查该头组件”

代码这是我的部分代码：

class Header extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      fixed: false 
     } 
    } 

    handleScroll(event) {  
     this.setState({ 
      fixed: true 
     }); 
    } 

    componentDidMount() { 
     window.addEventListener("scroll",() => {    
      this.handleScroll();  
     });  
    }  
    componentWillUnmount() { 
     window.removeEventListener("scroll",() => {    
      this.handleScroll();  
     }); 
    } 


    render() { 
     var { 
      dispatch, 
      className = "", 
      headerTitle = "Default Header Title", 
      onReturn, 
      onContinue 
     } = this.props; 

     var renderLeftItem =() => { 
      if (typeof onReturn === 'function') { 
       return (
        <MenuBarItem icon="navigation-back" onClick={onReturn}/> 
       ) 
      } 
     }; 

     var renderRightItem =() => { 
       if (typeof onContinue === 'function') { 
        return (
         <MenuBarItem icon="navigation-check" onClick= {onContinue}/> 
       ) 
       } 
     }; 

     return (
      <div className={"header " + className + this.state.fixed}> 
        {renderLeftItem()} 
        <div className="header-title">{headerTitle}</div> 
         {renderRightItem()} 
        </div> 
     ) 
    } 

} 


Header.propTypes = { 

}; 

let mapStateToProps = (state, ownProps) => { 
    return {}; 
}; 

export default connect(mapStateToProps)(Header); 

Answer 1

恕我直言，这是因为你，你期望它做ONT注销功能，之后被送到滚动事件此组件的实例已卸载

试试这个：

componentDidMount() { 
    this._handleScroll = this.handleScroll.bind(this) 
    window.addEventListener("scroll", this._handleScroll);  
}  
componentWillUnmount() { 
    window.removeEventListener("scroll", this._handleScroll); 
}