Uncaught TypeError: this.props.dispatch is not a function

Question

我试图在提交表单时发送一个动作，但我得到了这个：

Uncaught TypeError: this.props.dispatch is not a function

这是我的 class:

/**
 *
 * CatalogPage
 *
 */

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { Form, Control } from 'react-redux-form/immutable';

import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectCatalogPage from './selectors';
import reducer from './reducer';
import saga from './saga';

export class CatalogPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  handleSubmit = (user) => {
    this.props.dispatch({ type: 'test action' });
  }

  render() {
    return (
      <Form
        model="user"
        onSubmit={(user) => this.handleSubmit(user)}
      >
        <label htmlFor=".firstName">First name:</label>
        <Control.text model=".firstName" id=".firstName"/>

        <label htmlFor=".lastName">Last name:</label>
        <Control.text model=".lastName" id=".lastName"/>

        <button type="submit">
          Finish registration!
        </button>
      </Form>
    );
  }
}

CatalogPage.propTypes = {};

const mapStateToProps = createStructuredSelector({
  catalogpage: makeSelectCatalogPage(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withReducer = injectReducer({ key: 'catalogPage', reducer });
const withSaga = injectSaga({ key: 'catalogPage', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(CatalogPage);

我认为底部的 compose 函数会将我的组件连接到 store，从而可以通过 this.props.dispatch 访问 dispatch 函数。但它不起作用，我错过了什么？

谢谢！

编辑：我已将 handleSubmit 更改为箭头函数，但问题仍然存在

handleSubmit = (user) => {
    this.props.dispatch({ type: 'test action' });
  }

编辑：问题自行解决

需要提及的是，react-boiler-plate 并不像人们预期的那样用户友好。发生了很多奇怪的事情，我花了很长时间调试。

Answer 1

这里的问题是对class方法和React管理实例的方式的误解。

你可以做三件事来避免这个问题：

1) 将 (handleSubmit) 函数转换为箭头函数，这样在这种情况下，它不会有自己的 this.

handleSubmit = (user) => { // ...logic here }

2) 在组件内部创建构造函数并执行下一步：

this.handleSubmit = this.handleSubmit.bind(this)

在这种情况下，每次创建实例时都将 this 附加到函数。

3) 当你调用render里面的方法时使用.bind()绑定this:

onSubmit={(user) => this.handleSubmit.bind(this, user)}

Answer 2

如果您只想将 dispatch 注入您的组件，则不需要 mapDispatchToProps。当你想在将它们注入组件之前绑定你的动作创建者时，你会使用它。只需传递没有第二个参数的 mapStateToProps 就可以了。

您还需要按照 Jose Gomez 下面的建议进行操作。基本上你需要绑定它。最简单的方法是将 handleSubmit 更改为箭头函数

handleSubmit = user => {
...
}

Uncaught TypeError: this.props.dispatch is not a function

Uncaught TypeError: this.props.dispatch is not a function

reactjs

react-redux-form