对react.js的异步执行时机不确定

我试图从数据库中使用javascript/jquery函数从初始渲染前填充网站上的现有字段。我的理解是我必须调用ComponentWillMount才能在初始渲染之前准备好状态。下面是我看到了这个问题，答案是类似于我问什么，我有对react.js的异步执行时机不确定

componentWillMount:function() 
    { 
    var currentPage = location.hash; 
     getform(globalObj["#login"]["sessionId"], globalObj["#encsearch"]["ID"], formType, function(err, data) 
     { 
     console.log("Start form") 
     var info = data["FormData"]; 
     console.log("End form"); 
     }); 
     console.log("Start Outside") 
     this.setState({"fieldValuePairs": info}); 
     console.log(this.state.fieldValuePairs); 
     console.log("End Outside") 
    } 
    }, 
    render: function() { 
    console.log("Rendered first before FormData"); 
    return(
     <div className="twelve columns"> 
     <PageBuilder handleChange={this.handleChange} 
        pageName= {this.props.currentPage} 
        layoutConfig={this.state.layout} 
        initDataObj={this.state.fieldValuePairs} 
        rowClasses="row"/> 
     </div> 
    ); 
    } 
}); 

function getForm(sessionId, ID, formType, done) { 
       $.getJSON('/api/los/loans/loan/forms/get_form/', {"sessionId": sessionId, "Id": ID, "formType": formType}) 
       .done(function(data) { 
        done(null, data); 
       }).fail(function(err) { 
        done(err, null); 
       }).always(function() { 
           ; 
       }); 
}

样本， React fetch data in server before render ，但主要区别是，我打电话，并等待来自数据数据库找回我。由于Javascript不会等待数据回来，所以在检索数据和更新状态之前会发生初始呈现。我也无法在getform区域内调用this.state.fieldValuePairs;我认为这是因为它不在函数的范围之内。以下是控制台日志的执行顺序。

Start Outside 
End Outside 
Render first before FormData 
Start Form 
End Form

问题：如何在初始渲染之前获取数据？是否因为在执行var info = data["FormData"]之前执行的功能花费了太多时间;？

来源

2016-05-02 LampPost

这不是如何反应的作品。你不能在第一次渲染之前从ajax获取数据。但一旦渲染完毕，您应该记下此.state值以重新渲染圆顶。

要得到这个，你需要使用一个=>函数缩写器。

var self = this; 
getform(globalObj["#login"]["sessionId"], globalObj["#encsearch"]["ID"], formType,function(err, data) 
    { 
    console.log("Start form") 
    self.setState({ info : data["FormData"] }); 
    console.log("End form"); 
    });

状态值后更新的渲染将会再次调用

来源

2016-05-02 21:03:47 adrianj98

函数缩短服务？这是我从未听说过的，但我无法使用那个“符号”。我最终调整了初始状态来处理我的问题。 – LampPost

对不起，我做了假设，因为它是es6的反应。在这种情况下，我的原始代码会起作用。但看看你的代码，这是es5我更新以备将来参考 – adrianj98

对react.js的异步执行时机不确定

回答

相关问题