这是您的代码修改后的部分注释

  getInitialState: function(){
    return {
      // [{}] is weird, either use undefined (or [] but undefined is better).
      // If you use [], you loose the information of a "pending" request, as 
      // you won't be able to make a distinction between a pending request, 
      // and a response that returns an empty array
      response: undefined
    }
  },

  loadSubscriptionData: function(subscriptionId){
    var self = this;

    // You probably want to redo the ajax request only when the 
    // subscriptionId has changed (I guess?)
    var subscriptionIdHasChanged = 
       (this.props.subscriptionId !== subscriptionId)

    if ( subscriptionIdHasChanged ) {
        // Not required, but can be useful if you want to provide the user
        // immediate feedback and erase the existing content before 
        // the new response has been loaded
        this.setState({response: undefined});

        $.ajax({
          type: 'GET',
          url: '/subscription',
          data: {
            subscriptionId: subscriptionId //1
          },
          success: function(data){

            // Prevent concurrency issues if subscriptionId changes often: 
            // you are only interested in the results of the last ajax    
            // request that was made.
            if ( self.props.subscriptionId === subscriptionId ) {
                self.setState({
                  response: data
                });
            }
          }
        });
     }
  },

  // You want to load subscriptions not only when the component update but also when it gets mounted. 
  componentDidMount: function(){
    this.loadSubscriptionData(this.props.subscriptionId);
  },
  componentWillReceiveProps: function(nextProps){
    this.loadSubscriptionData(nextProps.subscriptionId);
  },

  render: function(){

      // Handle case where the response is not here yet
      if ( !this.state.response ) {
         // Note that you can return false it you want nothing to be put in the dom
         // This is also your chance to render a spinner or something...
         return <div>The responsive it not here yet!</div>
      }

      // Gives you the opportunity to handle the case where the ajax request
      // completed but the result array is empty
      if ( this.state.response.length === 0 ) {
          return <div>No result found for this subscription</div>;
      } 


      // Normal case         
      var listSubscriptions = this.state.response.map(function(index){
        return (
          index.id
        )
      });
      return (
        <div>
          {listSubscriptions}
        </div>
      ) 
  }

首先，您可能希望将 AJAX 调用放在componentWillMount()or 中componentDidMount()（如果您需要进行一些 DOM 操作）。

componentWillReceiveProps() 是

当组件接收新的 props 时调用。初始渲染不会调用此方法。

https://facebook.github.io/react/docs/component-specs.html

但即使您将 AJAX 调用放入componentWillMount()or 中componentDidMount()，render()也可能会在 AJAX 调用完成之前以空响应调用。

所以调用顺序是这样的（我假设你把 AJAX 调用放在里面componentWillMount()：

componentWillMount()（触发AJAX调用）-> componentDidMount()-> render()（渲染为空响应；所以index.order.id会导致错误）->AJAX调用返回和调用this.setState()->（其他一些组件生命周期方法如shouldComponentUpdate()被调用；详见上面的FB链接） ->render()再次被调用。

所以你的问题的解决方案是：

1) 将 AJAX 调用移动到componentWillMount()或componentDidMount()

2) 要么将初始状态设置为 just []（而不是[{}]），要么检查中是否index为空

var listSubscriptions = this.state.response.map(function(index){
  return (
    index.id
  )
});

我把它扔进了一个 JSBin，我似乎无法重现你的问题。

http://jsbin.com/jefufe/edit?js,output

每次单击按钮时，它都会向 发送新props<ChildComp/>，然后触发其componentWillReceiveProps，发送（假）ajax 请求，接收（假）响应，将响应状态设置为（假）响应，并重新渲染组件显示正确的数据。

我添加的唯一内容是index.id == null在尝试访问它之前进行检查，但我认为这不能解决您无法访问index.order.id.

我能想出您为什么无法访问的唯一原因index.order.id是因为您可能有一些代码没有向我们展示，这些代码在某些时候会修改响应。

另外，请记住，React 组件在其 state 或 props 发生变化时总是会重新渲染，除非您在其中定义了行为shouldComponentUpdate。这意味着当您从服务器接收整个对象并将其设置为组件中的状态时，它将重新呈现并向您显示更新的状态。React 没有理由/方法像您在原始帖子中建议的那样“浅渲染”您的响应对象。

我不确定这个答案是否有帮助，但希望您可以查看我提供的 JSBin 并找到您可能忽略的内容。

只需componentDidMount()在渲染中进行 AJAX 调用，您就可以简单地检查...

if(this.state.response === '' || this.state.response === [] || this.state.response === undefined)
return <Loader />
else{

// do your stuff here

}

或者，如果您使用的是 react 16.6 或更高版本，则可以简单地使用惰性组件。