React Js, Reflux render перед ответом ajax

Question

Я хотел бы получить список моих пользователей с вызовом api и отобразить таблицу с данными.

На данный момент я могу получить данные, но вэнь пытаюсь отобразить его, у меня есть ошибка.

Я думаю, что реакция - это визуализация до того, как конец вызова api не понимает, почему.

Вот мой код:

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

Вот мой магазин:

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}); 

     } 
    }); 
    } 

}); 

Вот мой Реагировать класс:

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 является undefind и у меня есть ошибка (не определено).

Благодарим за помощь.

Answer 1

Ожидаете ли вы, что пользовательский интерфейс замерзнет, ​​пока запрос не удастся?

Что происходит, так это то, что запрос выполняется асинхронно. После его успешного завершения будет вызван ваш обратный вызов success, и это место, где вы можете обновить компонент React.

Я не знаком с рефлюкса, так что может быть лучше, но мой наивный подход был бы:

1. При написании компонент, примите во внимание, что в первый раз это вынесенное будет нет данных, поэтому сделайте код более безопасным,

2. В обратном вызове success визуализируйте компонент с новыми данными.

Но опять-таки Reflux может иметь встроенный способ обработки REST, о котором я не знаю.

Answer 2

Я бы предложил этот образец. Пример шаблона рефлюкса можно найти по адресу 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); 
 
    },