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

Unsure of async execution timing for react.js

本文关键字：异步 执行时间 js react 不确定      更新时间：2023-09-26

我正在尝试使用javascript/jquery函数从数据库中提取数据，以在初始呈现之前填充网站上的现有字段。我的理解是，我必须调用ComponentWillMount，以便在初始渲染之前准备好状态。下面是我的的样本

  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() {
                                ;
                });
}

我看到的这个问题和答案与我所问的类似，渲染前在服务器中反应获取数据，但主要的区别是，我正在调用并等待数据库中的数据返回给我。由于Javascript不等待数据返回，因此在检索数据和更新状态之前会进行初始渲染。我也无法在getform区域内调用this.state.fieldValuePairs；我认为这是因为它不在功能范围内。下面是控制台日志的执行顺序。

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

问题：如何在初始渲染之前获取数据？是因为函数在var info = data["FormData"]；之前的执行时间太长吗；？

react不是这样工作的。在第一次渲染之前，您无法从ajax获取数据。但是一旦它被渲染，你应该更新this.state值来重新渲染圆顶。

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

 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");
  });

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

相关文章：