Javascript Reactjs，this.context在构造函数方法中未定义

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

我的问题是我使用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;

---

感谢您的帮助

您面临的问题是，您的组件应该是无状态的， 我说的还不够，状态应该存在于您的商店中，（UI状态“可以”存在于您的组件中，但这是有争议的）

您应该做的是使用更高级别的组件，将react组件包装在更高级别的组件中，让该组件从存储中获取状态，并将其作为道具传递给您的组件

这样，您就不需要初始状态，只需设置defaultProps和PropType

通过这种方式，您的组件是无状态的，您可以完全利用react生命周期，它也可以重用，因为您没有获取组件中实际数据的逻辑

好书

• 道具vs状态：）

• 更高级别的组成部分：

---

希望这有帮助：）

这个.context应该是什么？是我使用的工具中的可流动上下文：已经尝试绑定当前上下文，但它不起作用：-/如果组件（在您的情况下是子组件）是无状态的，这意味着我使用props，然后我不能用状态刷新数据，对吗？我该怎么做？不，当你设置state时，它会按照它说的那样做，它会自行设置状态，它会触发重新渲染，它还会重新渲染该组件中的所有子组件-但事实并非如此，你会从更高级别的组件收到新属性，因此，当您的更高级别组件从ur store接收数据时，或者无论从何处获得数据，您都应该将数据传递给它包装的组件，并且该组件将自动（刷新不是正确的词，它将重新渲染）。然后你可以在livecycle中连接shouldcomponentupdate，或者willreceiveprops..等等（并在那里做些事情）我在看fluxable

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;