reactJsの初期呼び出しの空の状態の値

Question

最初の呼び出しが行われると、サーバーからのAPIを使用して値がフェッチされますが、値を最初に状態に設定すると、最初は空になりますが、次の反復値から。これの背後にある理由は何か、これを克服する方法です。以下は同じもののためのコードです。変数sampleData [0]の値が空になり、配列の残りの値がコードごとにNaNになります。

var sampleData = []; 
var Sample = React.createClass({ 

    getInitialState: function() { 
     return { resValue : {} }; 
    }, 

    componentDidMount: function(){ 
      this.update();            
    }, 

    update: function(){ 
      new plotMovingLine(document.getElementById("movingLine"),[[0]], lineOptions); 
       this.getRandomData(); 
     setTimeout(this.update, 2000); 
    }, 

    getRandomData: function() { 

     var value=0,cal=0; 
     this.getData();     

    console.log(this.state.resValue); //Initial object value displaying empty 

     if(sampleData.length == 0) 
     { sampleData[0]=this.state.resValue; 
      console.log(sampleData[0]); } 
      else{ 
        value=sampleData[sampleData.length-1].val; 
        cal= this.state.resValue.val-value; 
        sampleData.push({"val":cal});   
      } 
    }, 

    getData: function(){   
     this.serverRequest = $.get("http://localhost:8088/data", function(data) {              
       this.setState({ 
          resValue: data 
       }); 
      }.bind(this));    
    }, 

    render: function() { 
     //view 
     } 
}); 

以下は、上記コードのコンソールからのイメージです。

Answer 1

SETSTATE（）直ちにthis.state変異しかし ペンディング状態遷移を作成しません。この メソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。 setStateへの呼び出しの同期操作を保証する はなく、パフォーマンス向上のために を呼び出してもよいでしょう。

setStateが変更された後に、コールバック関数に書き込むことで、何でも実行します。

var sampleData = []; 
var Sample = React.createClass({ 

    getInitialState: function() { 
     return { resValue : {} }; 
    }, 

    componentDidMount: function(){ 
      this.update();            
    }, 

    update: function(){ 
      new plotMovingLine(document.getElementById("movingLine"),[[0]], lineOptions); 
       this.getRandomData(); 
     setTimeout(this.update, 2000); 
    }, 

    getRandomData: function() { 

     var value=0,cal=0; 
     this.getData();     


    }, 

    getData: function(){   
     this.serverRequest = $.get("http://localhost:8088/data", function(data) {              
       this.setState({ 
          resValue: data 
       }, function(){ 
        console.log(this.state.resValue); //Initial object value displaying empty 

     if(sampleData.length == 0) 
     { sampleData[0]=this.state.resValue; 
      console.log(sampleData[0]); } 
      else{ 
        value=sampleData[sampleData.length-1].val; 
        cal= this.state.resValue.val-value; 
        sampleData.push({"val":cal});   
      } 
       }); 
      }.bind(this));    
    }, 

    render: function() { 
     //view 
     } 
}); 

二オプションはsetState()が完了するたびに、render()が再び呼び出されていることです。だから、あなたは状態データで何をしたいのかを決める関数を作成し、その関数を呼び出すことができます。render()