在AJAX之后加载React组件

Question

I have a ReactJS component that needs a response from an AJAX request before it can be rendered. I have tried to add a listener to the store, so that when it emits loaded , I call this.setProps(/*props*/) on the component. This doesn't work because the component has children that are also dependent upon that data being loaded.

I have also tried using componentWillUpdate and componentWillReceiveProps . I assumed that componentWillReceiveProps was what I was looking for, which does work for the main view on it's own but it doesn't propogate the data down to the children.

Any ideas?

Answer 1

Problem solved

var Account = React.createClass({

  /**
   * @cfg {String}
   */
  displayName: 'Account',

  /**
   * Get initial state of component
   */
  getInitialState: function() {
    return { user: null, accounts: null };
  },

  /**
   * Set state of component when UserStore is loaded
   */
  onUserStoreLoaded: function() {
    this.setState({
      user: UserStore.getUser(),
      accounts: UserStore.getUserAccounts() 
    });
  },

  /**
   * Perform logic when component is about to mount to
   * the DOM
   */
  componentWillMount: function() {
    if (UserStore._user) {
      this.onUserStoreLoaded();
    } else {
      UserStore.on('loaded', this.onUserStoreLoaded);
    }
  },

  render: function() {
    return (
      <div className="col-sm-6 col-sm-offset-3">
        <h1 className="text-center"> Account </h1>
        <ConnectedAccounts accounts={this.state.accounts} />
      </div>
    );
  }

});