React Js, Reflux render before ajax response

Question

I would like to get my users list with the api call and render a table with the data.

At the moment I can get the data but wen I try to display it, I have an error.

I think react is rendering before api call ends dont understand why.

Here is my code :

var Actions = Reflux.createActions([
  "fetchList"
]);

Here is my store :

var bannersStore  = Reflux.createStore({
  users: { data : {}},
  listenables: [Actions],

  init: function() {

    this.fetchList();

  },
  fetchList: function(){

    var self = this;

    reqwest({
      url: 'http://localhost:9080/api/member.json',
      method: 'get',
      success: function (resp) {
        console.log('fetch complete');
        self.users = resp;
        self.trigger({users :resp});

      }
    });
  }

});

Here is my React class:

var Users = React.createClass({

    getInitialState: function() {
        return {users : UsersStore.fetchList()};
    },

    render: function() {

        var usersRows = this.state.users.data.map(function(user, i) {

              return (
                  <tr key={i}>
                      <td><Link to="user" params={{ id: user.id }}>{user.attributes.firstname + ' ' + user.attributes.lastname}</Link></td>
                      <td>{user.attributes.email}</td>
                      <td>{user.status}</td>
                      <td>{user.language}</td>
                  </tr>
              )
          });

          return (
              <div>
                  <table className="table table-striped">
                      <thead>
                      <tr>
                          <th>Name</th>
                          <th>Image</th>
                          <th>URL</th>
                          <th>Active?</th>
                      </tr>
                      </thead>
                      <tbody>
                      { usersRows }
                      </tbody>
                  </table>
              </div>
          )

        }

});

this.state.users.data is undefind and I have an error (undefined).

Thank you for your help.

score 2 · Answer 1 · answered Nov 20 '15 at 17:16

I would suggest this pattern. An example of a reflux pattern can be found at https://github.com/calitek/ReactPatterns React.14/ReFluxSuperAgent.

    getInitialState: function() {
        return {users : {data: []}};
    },
    componentDidMount() {
      this.unsubscribe = UsersStore.listen(this.storeDidChange);
      Actions.fetchList();
    },
    componentWillUnmount() { this.unsubscribe(); },
    storeDidChange(newData) {
      this.setState(newData);
    },

score 1 · Answer 2 · edited Nov 20 '15 at 17:02

Are you expecting the UI to freeze until the request succeeds?

What happens here is that the request is executed asynchronously. Once it succeeds, your success callback will be triggered, and this is the place where you can update the React component.

I'm not familiar with Reflux, so there might be a better way, but my naive approach would be:

When writing the component, take into consideration that the first time it's rendered there will be no data, so make your code safer,
In the success callback, render the component again with the new data.

But again, Reflux might have a built-in way of handling REST that I'm not aware of.

React Js, Reflux render before ajax response

2 Answers2