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

Question

I'm new to React and for the first time I have stumbled upon the following error message:

Warning: setState(...) Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Comment component.

I'm trying to understand what the message is telling me but every time I re-shuffle my code I still get the same error message repeating about 50 times per second in my console although the components do render as they should. Here are the components:

App.js

import React, { Component } from 'react';
import $ from 'jquery';
import Commentspar from './Components/commentspar';

class App extends Component {
    constructor(props) {
        super(props);    
        this.state = {
            commentsLoading:"loading",
            commentsPre:[],
            upToId:0,
            comments:[]
        }
    }

commentsXMLrequest = () => {

    this.setState({
        commentsLoading:"loading"
    })

       //the below ajax call goes and retrieves the data to fill my components through state
      $.ajax({  
        type: "GET",  
        dataType: "json",  
        crossDomain:true,  
        url:"http://someendpoint.com/endpoint.php",
        success: function(data){

           var parsedComments = JSON.parse(data);  
           var newComments = [/* just above here I construct an array of new objects that look something like {id:0,text:"blah blah",type:"sad"} */];

                // here I populate the commentsPre array with the new array of objects
                this.setState({
                    commentsPre:newComments,
                    commentsLoading:""
                })   

            // here I call the next function (this is the one I would like to repeat)
            this.commentsShow()

        }.bind(this)
    })     
}


commentsShow = () => {

    var newId = this.state.upToId;
    // the newArray variable below is set to select which comment to show in the commentsPre array and increments every time the commentsShow function runs
    var newArray = [this.state.commentsPre[newId]];

    this.setState({
        comments:newArray,
        upToId:this.state.upToId + 1 //incrementation here
    })

    setTimeout(function(){
        // here is where i'm trying to repeat this function every second after incrementing the upToId state but it gives me the error
        this.commentsShow()
    }.bind(this),1000)
}

 componentDidMount() {       

     //initially kick of the load data function when page is loaded
     this.commentsXMLrequest()

}

render() {      

return (
    <div className="App">
        <div className="app-content-wrap">
            <div className="app-content-wrap-inner">

            <Commentspar commentsPre={this.state.commentsPre} commentsShow={this.commentsShow} commentsLoading={this.state.commentsLoading} comments={this.state.comments} />              

            </div>
        </div>    
  </div>
);
}
}

commentspar.js

import React, {Component} from 'react';
import Comment from'./comment';

class Commentspar extends Component { 

    render() {
        return (
            <div className="comments-par">
                <div className={"comments-inner " + this.props.commentsLoading}>

                    {
                       this.props.comments.map((comment) => {
                           return (
                            <Comment commentsShow={this.props.commentsShow} commentObj={comment} key={comment.id} />
                           )   
                       })
                    }
                </div>
            </div>
            )
        }
}


export default Commentspar;

Comment.js

import React, {Component} from 'react'; import $ from 'jquery';

class Comment extends Component {

 constructor(props) {
    super(props);
    this.state = {
        text:"",
        state:""
    };
  }

componentWillMount () {
    this.setState({
        text:this.props.commentObj.text
    })

}

render () {
    return (
        <div className={"comment-outer " + this.props.commentObj.type} data-type={this.props.commentObj.type}>
            <div className={"comment-inner " + this.state.loaded}>
                <div className={"comment-type " + this.props.commentObj.type}></div>
                <div className="comment-text">
                    <p className="placeholderText">{this.state.text}</p>
                </div>    
            </div>
        </div>
        )
    }
}

export default Comment;

Where have I gone wrong with my structure such that it's giving me this error message when I try and this.commentsShow() a second time and how can I re-arrange my structure to fix this?

Thanks!

Answer 1

You can't set state of unmounted component. The commentsShow method is repatedly called even if component has been unmounted and tries to set state of this component and this results in the error. The same problem will occur if you unmount component before AJAX call finished. You have to clear your timeout and cancel AJAX clall when component is about to be unmounted to make sure it will not try to set state after unmounting:

class App extends Component {
    ...
    commentsXMLrequest = () => {

        ...
           //the below ajax call goes and retrieves the data to fill my components through state
        this.myXHR =  $.ajax({  
            type: "GET",  
            dataType: "json",  
            crossDomain:true,  
            url:"http://someendpoint.com/endpoint.php",
            success: function(data){

               var parsedComments = JSON.parse(data);  
               var newComments = [/* just above here I construct an array of new objects that look something like {id:0,text:"blah blah",type:"sad"} */];

                    // here I populate the commentsPre array with the new array of objects
                    this.setState({
                        commentsPre:newComments,
                        commentsLoading:""
                    })   

                // here I call the next function (this is the one I would like to repeat)
                this.commentsShow()

            }.bind(this)
        })     
    }
    commentsShow = () => {
        ...
        this.myTimeout = setTimeout(function(){
            // here is where i'm trying to repeat this function every second after incrementing the upToId state but it gives me the error
            this.commentsShow()
        }.bind(this),1000)
    }

    componentWillUnmount() {
        clearInterval(this.myTimeout);
        this.myXHR.abort();
    }
}