[英]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.