在卸载组件上调用setState（）

想法：我想在登录后显示时间并在注销后隐藏它。程序工作，但注销后，我得到警告（看图3）。所以，我想知道：会警告影响应用程序，如果是的话，如何解决这个问题。

这里的Clock.jsx：在卸载组件上调用setState（）

import React from 'react' 

export class Clock extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      date: new Date() 
     } 
    } 

    componentDidMount() { 
     this.timerID = setInterval(
      () => this.tick(), 
      1000 
     ) 
    }  

    componentWillMount() { 
     clearInterval(this.timerID) 
    } 

    tick() { 
     this.setState({ 
      date: new Date() 
     }) 
    } 

    render() { 
     return (
      <div> 
       <hr /> 
       <p>Current Time: </p> 
       <p>{this.state.date.toLocaleTimeString()}.</p> 
       <hr /> 
      </div> 
     ) 
    } 
}

拨打index.jsx该组件：

function Logout(props) { 
    return (  
     <div> 
      <button className="btn btn-danger" onClick={props.onClick}> 
       Logout 
      </button> 
      <Clock /> 
     </div> 
    ) 
}

图片1 - 登录：

图片2 - 登录后：

图片3 - 注销后警告：

来源

2017-07-24 BlackB0ne

当您单击注销，它卸载你的''成分？ –

尝试调用clearInterval在componentWillUnmount。这可确保在时钟组件在DOM中不可用时，不会调用写在tick内的setState方法。

来源

2017-07-24 15:53:30

您能否详细说明一下，为什么在componentWillMount中调用clearInterval。 –

在Clock.jsx我输入componentWillMount（）而不是componentWillUnmount（）时输入错误。

旧的代码片段：

componentWillMount() { 
    clearInterval(this.timerID) 
}

修正：

componentWillUnmount() { 
    clearInterval(this.timerID) 
}

来源

2017-07-24 16:32:09 BlackB0ne

在卸载组件上调用setState（）

回答

相关问题