2017-05-18 11 views
0

を更新することができます。が反応 - SETSTATE(...)は、私だけが反応するように新たなんだと私は次のエラーメッセージにつまずいたのは初めてのために取り付けられたまたは取り付け部品

警告: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

:ここで構成要素であります反応する '。 'jquery'からのインポート$;

クラスコメントは、私はそれは私がしようとすると、私にこのエラーメッセージを与え、this.commentsShow()二時間を、どのように私は私の構造を-手配再することができますように私の構造と間違っているコンポーネント{

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; 

を拡張しますこれを修正しますか?

ありがとうございます!

答えて

0

アンマウントされたコンポーネントの状態を設定することはできません。 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(); 
    } 
} 
+0

.. –

+0

をので、 Ajaxコールの成功時のコールバックが呼び出される前にコンポーネントがアンマウントされている可能性があります。そのような場合は、コンポーネントがアンマウントされようとしているときにAJAX呼び出しを中止する必要があります。更新された回答を確認してください。 –

関連する問題