React JS setState（...）：只能更新已安裝或正在安裝的組件

Question

我收到此錯誤setState(...): Can only update a mounted or mounting component.，但我無法弄清楚如何解決該問題。

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; 

這是我的代碼導致的問題。

基本上我希望它在設定的時間量之後，會從loading1.gif變成說無法找到你要找的東西。它這樣做，但它會拋出我無法擺脫的錯誤setState(...): Can only update a mounted or mounting component.。

這是我如何調用加載微調

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

Answer 1

你不必使用setInterval功能，你可以用setTimeout做到這一點很容易，你應該使用一個陣營的生命週期函數有一個超時而不是調用它形象的onLoad的。

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

有這個良好的文檔這裏 https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

當此類問題處理一個很好的做法是尋找在反應的Facebook的文件。

private _isMount = false; 

componentDidMount() { 
    this._isMount = true; 
} 

componentWillUnmount() 
{ 
    this._isMount = false; 
} 

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

Answer 3

不能調用函數用的setState（）到構造函數中，你應該試試這個：

constructor(props){ 
super(props); 
} 

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

並檢查LifeCycle of your component