React Redux: невозможно прочитать свойство «отправка» неопределенного

Я долго работал над этим, но не нашел решения:

Я получаю 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'));

Я потратил хорошее время, пытаясь понять проблему, был бы признателен, если бы вы могли помочь.


reactjs redux dispatch
person sachsure    schedule 04.01.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Попробуйте связать this при передаче handleInputChange в onChange из TextField:

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

Это хорошая статья, объясняющая зачем и когда связывать this в компонентах реакции.

person Michael Peyper    schedule 04.01.2018

arrow_upward
1
arrow_downward

Я не уверен, что это правильный способ отправки действия. Обычно я делаю что-то вроде этого:

...
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

person The Reason    schedule 04.01.2018