reactjs - 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() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

通过将其写入回调函数，在 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()

中调用该函数