Reactjs,this.context在构造函数方法中是未定义的

时间:2015-09-03 18:29:28

标签: javascript reactjs flux fluxible

我实际上正在尝试开发一个对应于列表的简单组件,当我点击按钮时,我会再填充一个项目。

我的问题是我使用ES6,所以我不使用getInitialState,我使用构造函数进行初始化,就像在doc中解释的那样。

我的问题是,现在,this.context在我的构造函数中是未定义的,我无法直接在consntructor中获取我的第一个数组(或预加载的数组):

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;

我只想在构造函数中预加载数组,即使它是空的也不是,并且这正是我的商店返回的内容:

从&#39; fluxible / addons / BaseStore&#39;中导入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;

感谢您的帮助

1 个答案:

答案 0 :(得分:4)

您面临的问题是因为您的组件应该是无状态的, 我不能这么说,州应该住在你的商店,(UI状态,&#34;可以&#34;生活在你的组件中,但这有争议)

您应该做的是使用更高级别的组件,将您的react组件包装在更高级别的组件中,让该组件从商店中获取状态,并将其作为props传递给组件。

这样您就不需要初始状态,只需设置defaultProps和propTypes。

这样,您的组件是无状态的,您可以完全使用反应生命周期,它也可以重复使用,因为您没有在组件中获取实际数据的逻辑。

好读

希望这会有所帮助:)