React Redux：无法读取未定义的属性“调度”

Posted 2023-02-22

【中文标题】React Redux：无法读取未定义的属性“调度”

【英文标题】：React Redux: Cannot read property 'dispatch' of undefined

【发布时间】：2018-06-14 00:39:20

【问题描述】：

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

每当调用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'));

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

【参考方案1】：

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

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

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

【参考方案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的信息