[英]Why I can't access component state in render in reactjs
尝试学习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
,或者我做错了方法?
根据通量理论,您的组件必须调用一个动作并等待存储通知数据准备就绪。 它是商店中必须聆听调度员的商店。
如果我是你,我将在getInitialState中返回一个模拟对象,将组件订阅UserStore更改事件,并在商店告诉我后获取用户数据。
然后,我将在UserStore订阅的回调中更新组件状态(使用setState方法)。 setState方法将自动调用render。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.