为什么我无法在reactjs中访问渲染中的组件状态

Question

尝试学习react.js我试图在getInitialState中设置组件的状态，并使用this.state.myproperty在渲染中访问它，但似乎我在做一些愚蠢的错误。这就是我所拥有的到目前为止。

app.jsx 这是我的切入点

var React = require('react');
var App = require('./components/App');

React.render(
  <App />,
  document.getElementById('content')
);

/components/App.jsx

var React         = require('react');
var UserStore     = require('../stores/UserStore');
var ActionCreator = require('../actions/Actions');
var UserApp       = require('./UserApp');
var App = React.createClass({

  propTypes: {
     users: React.PropTypes.array,
   },

 getInitialState: function() {
      ActionCreator.loadUsers();
      return UserStore.getState();
  },

  render: function(){
    var users = this.state.users;
     console.log(this.state);// see what is in the state
     console.log(users);  // see what is in users 
     return(
        <UserApp users = {users}/>
     );
  },
});


module.exports = App;

行动创作者

var AppDispatcher = require('../dispatcher/AppDispatcher');
var Constants = require('../constants/Constants');
var ApiClient = require('../clients/ApiClient');
var ActionTypes = Constants.ActionTypes;
var Actions = {

  loadUsers: function(){
     ApiClient.getUsers(function(usersObj) {
       AppDispatcher.handleServerAction({actionType:ActionTypes.LOAD_USERS_SUCCESS, usersObj: usersObj});
     }.bind(this), function(error) {
      AppDispatcher.handleServerAction({actionType:ActionTypes.LOAD_USERS_FAIL, error: error});
     }.bind(this));
   },
};

module.exports = Actions;

这是我在控制台中看到的内容

为什么我无法从州访问users，或者我是以错误的方式进行访问？

Answer 1

在通量理论上，您的组件必须调用操作并等待存储通知数据已准备就绪。这是一个必须听取调度员的商店。

如果我是你，我会在getInitialState中返回一个模拟对象，将我的组件订阅到UserStore更改事件，并在商店告诉我时获取用户数据。

然后我将在UserStore订阅的回调中更新组件状态（使用setState方法）。 setState方法将自动调用render。