Question

所以说我有一个React父组件在设置状态的componentDidMount上执行AJAX请求，然后在渲染中我有一个子组件，它将从状态中获取一些数据并且将是在子组件内部使用该信息执行另一个AJAX请求，我该如何处理？

例如：

var Parent = React.createClass({
  getInitialState: function() {
    return { num: '' };
  },

  componentDidMount: function() {
    $.ajax({
      url: '/urltogetdata',
      method: 'GET',
      dataType: 'json',
      success: function(data) {
        if (this.isMounted()) {
          this.setState({num: data['num']});
        }
      }.bind(this)
    });
  },

  render: function() {
    return (
      <div>
        <Child num={this.state.num}/>
      </div>
    );
  },
});

var Child = React.createClass({
  getInitialState: function() {
    return { childInfo: {} };
  },

  componentDidMount: function() {
    $.ajax({
      url: '/urltogetdata/' + this.props.num,
      method: 'GET',
      dataType: 'json',
      success: function(data) {
        if (this.isMounted()) {
          this.setState({childInfo: data});
        }
      }.bind(this)
    });
  },

  renderChildChild: function() {
    return (<div><ChildChild /></div>);
  },

  render: function() {
    return (
      <div>
        {this.state.childInfo.map(this.renderChildChild)}
      </div>
    );
  },
});

现在我遇到的问题是所有这些渲染都是在我获取信息之前发生的。我通常可以获取数据并将其显示在Parent端，但是当它返回到具有Parent状态的Child（从AJAX请求设置）时，我在尝试setState时丢失了一个渲染，因为它是已经设定。

我已经尝试过使用shouldComponentUpdate，componentWillUpdate和其他各种各样的东西而且我很茫然。我真的不知道还有什么可以尝试，或者它只是我必须处理的东西，因为在React中的AJAX和异步渲染还没有呢？

使用Parent调用AJAX请求，然后子组件调用另一个ajax请求来反应app

0 个答案: