私は実際に、ボタンを押したときにもう 1 つの項目を入力するリストに対応する単純なコンポーネントを開発しようとしています。
私の問題は、ES6を使用しているため、getInitialStateを使用しないため、ドキュメントで説明されているように、コンストラクターを使用して初期化を行うことです。
私の問題は、 this.context がコンストラクターで定義されておらず、コンストラクター内で初めて配列 (または事前に読み込まれた配列) を直接取得できないことです。
import React from 'react';
import ListStore from '../stores/ListStore';
class Client extends React.Component {
constructor(props){
super(props);
this.state = this.getStoreState(); // throw me that in getStoreState, this.context is undefined
}
static contextTypes = {
executeAction: React.PropTypes.func.isRequired,
getStore: React.PropTypes.func.isRequired
};
componentDidMount() {
this.context.getStore(ListStore).addChangeListener(this._onStoreChange.bind(this));
}
componentWillUnmount() {
this.context.getStore(ListStore).removeChangeListener(this._onStoreChange.bind(this));
}
_onStoreChange () {
this.setState(this.getStoreState());
}
getStoreState() {
return {
myListView: this.context.getStore(ListStore).getItems() // gives undefined
}
}
add(e){
this.context.executeAction(function (actionContext, payload, done) {
actionContext.dispatch('ADD_ITEM', {name:'toto', time:new Date().getTime()});
});
}
render() {
return (
<div>
<h2>Client</h2>
<p>List of all the clients</p>
<button onClick={this.add.bind(this)}>Click Me</button>
<ul>
{this.state.myListView.map(function(test) {
return <li key={test.time}>{test.name}</li>;
})}
</ul>
</div>
);
}
}
export default Client;
空であろうとなかろうと、コンストラクターに配列をプリロードしたいだけです。それがまさに私のストアが返すものです:
「fluxible/addons/BaseStore」から BaseStore をインポートします。
class ListStore extends BaseStore {
constructor(dispatcher) {
super(dispatcher);
this.listOfClient = [];
}
dehydrate() {
return {
listOfClient: this.listOfClient
};
}
rehydrate(state) {
this.listOfClient = state.listOfClient;
}
addItem(item){
this.listOfClient.push(item);
this.emitChange();
}
getItems(){
return this.listOfClient;
}
}
ListStore.storeName = 'ListStore';
ListStore.handlers = {
'ADD_ITEM': 'addItem'
};
export default ListStore;
ご協力いただきありがとうございます