Question

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

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

这是我的班级：

/**
 *
 * 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函数会将我的组件连接到商店，因此可以通过this.props.dispatch访问调度函数。但它不起作用，我错过了什么？

谢谢！

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

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

编辑：问题自行解决了

值得一提的是，反应锅炉板并不像人们期望的那样方便用户。发生了许多奇怪的事情并花了很长时间进行调试。

Answer 1

这里的问题是对类方法的误解以及React管理实例的方式。

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

1）将（handleSubmit）函数转换为箭头函数，因此在这种情况下，它不会有自己的this。

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

2）在组件内部创建一个构造函数，然后执行下一步：

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

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

3）当你在渲染中调用方法时，使用.bind()绑定this：

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

Answer 2

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

您还需要完成Jose Gomez在下面建议的内容。基本上你需要绑定它。最简单的方法是将handleSubmit更改为箭头函数

handleSubmit = user => {
...
}

未捕获的TypeError：this.props.dispatch不是函数

2 个答案: