相关疑难解决方法(0)

如何等待AJAX​​响应并且只有在渲染组件之后?

我的一个React组件有问题.我认为在React呈现ChildComp组件之前,AJAX不会从外部服务器加载所有内容.

Obj树

在上面你可以看到来自服务器的响应树.这是我的组件代码:

var ChildComp = React.createClass({
  getInitialState: function(){
    return {
      response: [{}]
    }
  },
  componentWillReceiveProps: function(nextProps){
    var self = this;

    $.ajax({
      type: 'GET',
      url: '/subscription',
      data: {
        subscriptionId: nextProps.subscriptionId //1
      },
      success: function(data){
        self.setState({
          response: data
        });
        console.log(data);
      }
    });
  },
  render: function(){
      var listSubscriptions = this.state.response.map(function(index){
        return (
          index.id
        )
      });
      return (
        <div>
          {listSubscriptions}
        </div>
      ) 
  }
});
Run Code Online (Sandbox Code Playgroud)

这工作正常,但如果我改变我的回报:

  return (
     index.id + " " + index.order.id
  )
Run Code Online (Sandbox Code Playgroud)

id未定义.以及订单对象的所有其他属性.为什么会这样?如果我console.logsuccess功能后回复它会提供所有数据(如图片所示).我的猜测是,当React渲染组件时,只加载第一个对象,然后加载所有其他内部对象.我真的不能说是不是这样(听起来很奇怪),也不能说如何解决这个问题.

我也尝试过类似的东西

  success: function(data){ …
Run Code Online (Sandbox Code Playgroud)

javascript ajax reactjs

37
推荐指数
1
解决办法
5万
查看次数

标签 统计

ajax ×1

javascript ×1

reactjs ×1