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

首先，mapStateToProps不是redux表单独有的，它来自redux / react-redux。

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

.zip file downloaded at client successfully

let signInForm = reduxForm( { form: "signInForm" })(SignIn); export default signInForm = connect(mapStateToProps, null)(SignIn);不是redux-form组件，因此它不具有SignIn函数。

你想要的是这个：

handleSubmit

Answer 2

这里的问题是您将原始组件传递给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);

Redux表单：MapStateToProps正在打破表单

2 个答案: