Reactjs React Redux无法从onClick中的方法访问道具

我的index.js有以下内容。我已使用创建React应用程序设置React。然后我安装了redux和react redux

import React from 'react';
import ReactDOM from 'react-dom';
import AppContainer from './AppContainer';
import {createStore} from 'redux'
import {Provider} from 'react-redux'

const defaultState = {
    activeTab: 'firstTab'
};

const reducer = function(state=defaultState, action){
    switch (action.type) {
        case 'TAB_CHANGED':
            return state.merge({
                activeTab: state.activeTab
            })
        default: return state;
    }
};
const store = createStore(reducer);

ReactDOM.render(
    <Provider store={store}>
        <AppContainer />
    </Provider>,
    document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“./AppContainer”导入AppContainer；
从“redux”导入{createStore}
从“react redux”导入{Provider}
const defaultState={
activeTab:'firstTab'
};
const reducer=函数（state=defaultState，action）{
开关（动作类型）{
案例“TAB_已更改”：
返回状态。合并({
activeTab:state.activeTab
})
默认：返回状态；
}
};
const store=createStore（reducer）；
ReactDOM.render(
,
document.getElementById（'root'））
);

下面是我的AppContainer.js

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux'

class AppContainer extends React.Component {
  static propTypes = {
      activeTab: PropTypes.string.isRequired,
      dispatch: PropTypes.func.isRequired,
  }

  doSomething = function(){
      this.props.dispatch('TAB_CHANGED', {activeTab: Math.random().toString(36).substring(7)})
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">{ this.props.activeTab }</h1>
        </header>
        <p className="App-intro">
            <button onClick={this.doSomething}>Do Something</button>
        </p>
      </div>
    );
  }
}

function mapStateToProps(state){
    return state;
}

export default connect(mapStateToProps)(AppContainer);

从“React”导入React；
从“道具类型”导入道具类型；
从“react redux”导入{connect}
类AppContainer扩展了React.Component{
静态类型={
activeTab:PropTypes.string.isRequired，
调度：需要PropTypes.func.isRequired，
}
doSomething=函数（）{
this.props.dispatch（'TAB_CHANGED'，{activeTab:Math.random（）.toString（36）.substring（7）}）
}
render（）{
返回(
{this.props.activeTab}

做点什么

);
}
}
函数MapStateTops（状态）{
返回状态；
}
导出默认连接（MapStateTops）（AppContainer）；

---

第一次呈现时，页面加载良好。react dom可以访问

this.props.activeTab

。但是，当我单击

执行某件事
按钮时，我得到以下错误：
类型错误：无法读取未定义的属性“props”
您必须将doSomething函数绑定到组件的上下文，否则它将引用渲染的上下文。因此，将代码段添加到构造函数中

constructor(){
    super()
    this.doSomething = this.doSomething.bind(this);
}

constructor(){}
doSomething = () => {
....
}

或ES6-将doSomething声明为箭头函数，并且不需要在构造函数中绑定

constructor(){
    super()
    this.doSomething = this.doSomething.bind(this);
}

constructor(){}
doSomething = () => {
....
}