reactJs中初始调用的空状态值

IT技术 reactjs
2021-05-06 22:48:22

当进行初始调用时,使用 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 
        }
});

下面是来自上述代码控制台的图像。

图片

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