ReactJS：每个组件中的代码以什么顺序运行？

Question

我在 componentDidMount 中对以下组件结构进行了 API 调用。但是 console.log("SAS",this.props.courses) CourseCardGroup 中的这一行第一次打印两次为空值，第二次使用返回值形式 API 打印，如下图所示。如何让它第一次使用来自 API 调用的数据？

提前致谢。

var {Router, Link, Route, hashHistory} = require('react-router');

var CourseCard = React.createClass({
  render: function() {
    return(
          <h4>{this.props.each_course.course_name}</h4>
      );
  }
});

var CourseCardGroup = React.createClass({
  render : function() {
    var props = this.props;
    console.log("SAS",this.props.courses)
    var all_course_cards = this.props.courses
      .map(function(each_course){
        return(
          <CourseCard key={each_course.course_name} each_course={each_course} />
          );
      });
    return (
      <div>
        {all_course_cards}
      </div>
    );
  }
});

var FilterableCourseGroup = React.createClass({
  render: function() {
    return(
      <div className="sidebar">
        <CourseCardGroup  courses={this.props.courses} />
      </div>
    );
  }
});

const FilterableCourseGroupWrapper = React.createClass({
    getInitialState: function(){
    return{
      all_courses: []
      };
  },
  componentDidMount: function() {
    data = {"k":"coursesdetails"}
    $.post("http://127.0.0.1:8080/QuestionPapers/getcoursedetails/",data , function(result) {
      console.log("Out mounted: ",  result)
      if (this.isMounted()) {
          this.setState({all_courses:result})
          console.log("In mounted: ",  result)  
      }
    }.bind(this));
  },
  render() {
    return (
      <div className="courses_and_papers">
        <FilterableCourseGroup courses={this.state.all_courses}/>
        {this.props.children}
      </div>
      )
  }
})

const App = React.createClass({
  render() {
    return (
      <div>
          <FilterableCourseGroupWrapper/>
          {this.props.children}
      </div>
    )
  }
})


// Finally, we render a <Router> with some <Route>s.
// It does all the fancy routing stuff for us.
ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
    </Route>
  </Router>
), document.getElementById("filterable_courses"))

Answer 1

您在渲染方法中是控制台日志记录值，因此您有一个空状态或未定义，因为 ajax 是异步的，因此该值将在稍后提供。

这意味着 React 不会等待它，而是会在它可用时处理它。

组件生命周期方法的详细列表位于：https://facebook.github.io/react/docs/component-specs.html 它将为您提供有关这些触发方式的足够信息。

虽然我鼓励您在 https://facebook.github.io/react/docs/reconciliation.html

阅读有关和解的内容

Answer 2

您的代码当前执行的操作：

getInitialState
然后render（展示一些东西）
然后 componentDidMount，这会进行 ajax 调用以获取数据
当您收到 ajax 的响应时，您调用 setState
这会触发另一个 render（这次有数据）

对于第一次渲染（虽然您仍然没有任何内容可显示），您通常会收到某种 'loading' 消息。

类似于：

var FilterableCourseGroup = React.createClass({
  render: function() {
    if (this.props.courses.length == 0) {
      // return loading message
    } else {
      // now we apparently have courses
      return(
        <div className="sidebar">
          <CourseCardGroup  courses={this.props.courses} />
        </div>
      );
    }
  }
});

ReactJS：每个组件中的代码以什么顺序运行？

ReactJS: In which order the code in each component runs?

ajax

reactjs

react-router