React JS setState（…）：只能更新已安装或正在安装的组件

Question

I am getting this error setState(...): Can only update a mounted or mounting component. but I can't work out how to fix it.

import React, { Component } from 'react';

import Loading1 from '../images/loading1.gif';

class LoadingSpinner extends Component {
  constructor(props){
    super(props);

    this.changeState = this.changeState.bind(this);
    this.timer = this.timer.bind(this);
  }

  state = {
    loadingImg: Loading1,
    loading: true
  }

  timer(){
    var self = this;
    var startTime = new Date().getTime();
    var interval = setInterval(function () {
      if (new Date().getTime() - startTime > 3000) {
        clearInterval(interval);
        return;
      }
      self.changeState();
    }, 2000);
  }

  changeState(){
    this.setState({
      loading: false,
    })
  }

  render() {


    const topMargin = {
      marginTop: "50px"
    }


    return (
      <div className="containter" style={topMargin}>
        <center>
          {this.state.loading ? <img src={this.state.loadingImg} onLoad=    {this.timer()} alt="Loading..." /> : <h2>Unable To Find What You Are Looking     For!</h2> }
        </center>
      </div>
    );
  }
}

export default LoadingSpinner;

this is my code that is causing the issue.

Basically I want it so that after the set amount of time it will change from the loading1.gif to say Unable to find what you are looking for. It does this but it throws the error setState(...): Can only update a mounted or mounting component. which I can't get rid of.

This is how I am calling loading spinner

<Tab label="Applicant Details" value="GetCasePersonal">
     {this.state.GetCasePersonal.length === 0 ? <LoadingSpinner /> :
     <div>
         <ViewPersonalDetails Case={this.state.GetCasePersonal} />
     </div>
     }
</Tab>

Answer 1

You need not use a setInterval function, you can do it with setTimeout easily and you should use a React lifecycle function to have a timeout instead of calling it onLoad of image.

 class LoadingSpinner extends React.Component { constructor(props){ super(props); this.timeout = null; this.changeState = this.changeState.bind(this); } state = { loadingImg: '', loading: true } componentDidMount(){ this.timeout = setTimeout( () => { console.log('I am changing state'); this.changeState(); }, 3000); } componentWillUnmount() { clearTimeout(this.timeout); } changeState(){ this.setState({ loading: false, }) } render() { const topMargin = { marginTop: "50px" } return ( <div className="containter" style={topMargin}> <center> {this.state.loading ? <img src={this.state.loadingImg} alt="Loading..." /> : <h2>Unable To Find What You Are Looking For!</h2> } </center> </div> ); } } ReactDOM.render(<LoadingSpinner/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 2

There's good documentation about this here https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

When dealing with such problems a good practice is to search in react facebook documentation.

private _isMount = false;

componentDidMount() {
  this._isMount = true;
}

componentWillUnmount()
{
    this._isMount = false;
}

timerJob()
{
    if(this._isMount == false)
        return;
    // setState
}