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（这次是数据）

对于第一个渲染（虽然你仍然没有任何东西可以显示），你通常会有某种“加载”＃39;消息。

类似的东西：

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：每个组件中的代码以什么顺序运行？

2 个答案: