reactjs - react Redux : Cannot read property 'dispatch' of undefined

Question

我已经为此工作了很长时间，但没有找到解决方案:

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

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

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

在将 handleInputChange 传递到 TextField 的 onChange 时尝试绑定(bind) this:

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

This is a good article解释为什么以及何时在 React 组件中绑定(bind) this。