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

Question

我是React的新手，这是我第一次偶然发现以下错误消息：

警告：setState（...）只能更新已安装或正在安装的组件。 这通常意味着您在未安装的组件上调用了setState（）。 这是无人值守。 请检查注释组件的代码。

我试图理解该消息告诉我的内容，但每次重新调整代码时，尽管组件确实按应有的方式呈现，但我仍然在控制台中收到相同的错误消息，每秒重复执行约50次。 以下是组件：

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

从'react'导入React，{Component}； 从'jquery'导入$;

类Comment扩展了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;

我的结构哪里出了问题， this.commentsShow()第二次尝试和this.commentsShow()时都会出现此错误消息，我该如何重新排列结构以解决此问题？

谢谢！

Answer 1

您无法设置未安装组件的状态。 该commentsShow方法repatedly调用，即使组件已卸载，并尝试设置此组件的状态，这导致错误。 如果在AJAX调用完成之前卸载组件，则会发生相同的问题。 您必须清除超时并在要卸载组件时取消AJAX clall，以确保在卸载后它不会尝试设置状态：

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();
    }
}