Redux 表单：MapStateToProps 正在破坏表单

Question

这个 Redux 表单中 MapStateToProps 的目标是检查用户是否在数据库中并将 validuser 状态传回提交的表单，以便我可以呈现错误消息，或将用户重定向到主页。问题是当我尝试将 MapStateToProps 连接到表单时，它会抛出错误。

Redux 形式：

import React, { Component } from "react";
import { connect } from 'react-redux';
import { reduxForm, Field, Form, reset } from "redux-form";
import { Link } from 'react-router-dom';
import { checkUser } from "../actions/index";


class SignIn extends Component {
  constructor(props) {
    super(props)

    this.state = {
      user: {
        validUser: {
          username: null,
          validUser: null
        }
      }
    }
  }

  onSubmit = (props) => {
    this.props.dispatch(checkUser(props));
  }

  render() {
    const { handleSubmit, reset } = this.props;

    return(
      <div>
      <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
        <h3>Sign In!</h3>

        <div>
          <label><h3>Username</h3></label>
          <div>
            <Field name="username" component="input" type="text" />
          </div>
        </div>

        <div>
          <label><h3>Password</h3></label>
          <div>
            <Field name="password" component="input" type="password" />
          </div>
        </div>

        <button type="submit" className="btn btn-primary">Submit</button>
        <button><Link to="/me" className="btn btn-danger">Cancel</Link></button>
      </form>

    </div>
    )
  }
};

function mapStateToProps(state) {
  return {
    user: state.user.validUser
  };
};

let signInForm = reduxForm(
  { form: "signInForm" })(SignIn);


export default signInForm = connect(mapStateToProps, null)(SignIn);

但是我收到以下错误：

Uncaught TypeError: handleSubmit is not a function
    at SignIn.render (signin.js:33)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)

任何人都可以建议调试这个问题吗？

Answer 1

这里的问题是您将原始组件传递给 connect。

const ReduxFormSigninForm = reduxForm({ form: "signInForm" })(SignIn);

const connected ReduxFormSigninForm = connect(mapStateToProps)(ReduxFormSigninForm);

另一种编写方法是使用 compose，您可以从 redux 导入它。

import { compose } from 'redux';

export default compose(
  connect(mapStateToProps),
  reduxForm({ form: "signInForm" })
)(SignIn);

Answer 2

首先，mapStateToProps 不是 redux 形式独有的东西，它来自 redux/react-redux.

您的代码的问题是您将 SignIn 组件传递给连接函数，而不是您刚刚创建的 redux-form 的 HOC 组件。

let signInForm = reduxForm(
   { form: "signInForm" })(SignIn);

export default signInForm = connect(mapStateToProps, null)(SignIn);

SignIn 不是 redux 形式的组件，所以它不会有 handleSubmit 功能。

你要的是这个：

export default connect(mapStateToProps, null)(signInForm);

Redux 表单：MapStateToProps 正在破坏表单

Redux Form: MapStateToProps is breaking form

javascript

reactjs

redux

redux-form