React Redux：无法读取undefined的属性'dispatch'

Question

我一直在研究这个问题，但没有找到解决方案：

每当调用Cannot read property 'dispatch' of undefined函数时，我都会得到handleInputChange。

这是我的应用程序的基本布局：

App.tsx

import * as React from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';

import SuperSignupScreen from './screens/SuperSignupScreen'

import './App.css';
import {connect, Dispatch} from "react-redux";


export type SessionProps = {
}

class AppImpl extends React.PureComponent<SessionProps & { dispatch: Dispatch<{}> }, {}> {
  render() {
      return(
          <Router>
            <Switch>
                <Route path="/superSignup" component={SuperSignupScreen}/>
                 <Route key="404" component={NotFoundScreen} />
            </Switch>
          </Router>
      )
  }
}

function mapStateToProps(state: { session: SessionProps }): SessionProps {
    return state.session;
}


const App = connect(mapStateToProps)(AppImpl);

export default App;

这是SuperSignupScreen：

    import * as React from "react";
import {TextField, RaisedButton} from 'material-ui';
import {connect, Dispatch} from "react-redux";
import {SuperSignup, updateForm} from "../actions/SuperSignupActions";

export type SignupScreenProps = {signup: SuperSignup};

class SuperSignupScreenImpl extends React.PureComponent<HomeScreenProps & {dispatch: Dispatch<{}>}, {}> {
    render() {

        return(

                <TextField
                hintText = "Name"
                onChange = {this.handleInputChange}
                name = "name"
            >


                </TextField>
                    <RaisedButton label="Submit" primary={true}/>

        );
    }
    handleInputChange(event){
        const target = event.target;
        const value = target.value;
        this.props.dispatch(updateForm(value));
    }
}

function mapStateToProps(state: {signup: SuperSignup}): SignupScreenProps {
    return {signup: state.signup};
}

const SuperSignupScreen = connect(mapStateToProps)(SuperSignupScreenImpl);

export default SuperSignupScreen;

这是index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import {applyMiddleware, combineReducers, createStore} from 'redux';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

import './index.css';
import App from './App';
import thunk from "redux-thunk";

const rootReducer = combineReducers({

});

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render((
    <Provider store={store}>
        <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
            <App/>
        </MuiThemeProvider>
    </Provider>

), document.getElementById('root'));

我花了很多时间试图理解这个问题，如果你能提供帮助，我将不胜感激。

Answer 1

在将this传递给handleInputChange的onChange时尝试绑定TextField：

 <TextField
   hintText = "Name"
   onChange = {this.handleInputChange.bind(this)}
   name = "name"
 >

This is a good article解释为什么以及何时将this绑定在反应组分中。

Answer 2

我不确定这是否是一种正确的调度方式。通常我做这样的事情：

...
import { connect } from 'react-redux';
import { sayHello } from './my/actions/';
...
class Example extends Component{
  constructor(props){
    super(props);
    ...
    this.handleOnClick = this.handleOnClick.bind(this);
    ...
  }
  ...
  handleOnClick(){
    this.props.sayHello()
  }
  ...
}

const mapStateToProps = (state) => state
const mapDispatchToProps = { sayHello, doIt, ...}

export default connect(mapStateToProps, mapDispatchToProps)(Example).

Here你可以阅读更多关于mapDispatchToProps的信息