检查 `ConnectedField` 的渲染方法答案

【问题标题】：Check the render method of `ConnectedField`检查 `ConnectedField` 的渲染方法
【发布时间】：2019-05-09 07:11:21
【问题描述】：

当我在简单的三个输入字段表单中使用 redux-form 时收到此错误消息。

form.jsx

import React, {Component} from 'react';
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux';

class Signup extends Component {

signupView = () => {
  return (
    <section id="user_login">
      <form onSubmit={this.handleSignup}>
      <ul>
        <li>
          <div className="custom_group">
            <Field type="text" className="trans login_input" title="Username" name="username" placeholder="Username" />
          </div>
        </li>
        <li className="sbt_btn">
          <button className="trans white_bg">SIGN UP</button>
        </li>
      </ul>
      </form>
    </section>
  )
}
render() {
    return (
      <div>{this.signupView()}</div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    isRegistered: state.signup.isRegistered,
  };
}

const mapDispatchToProps = dispatch => ({
  SingupAction: (signupInput) => { dispatch(SingupAction(signupInput)) },
})

const formWrapped = reduxForm({
  form: 'Signup'
})(Signup);
export default connect(mapStateToProps, mapDispatchToProps)(formWrapped);

P.S SingupAction 和 handleSignup 已经在工作，所以我没有将它们包含在代码中。并且已经在index.js 文件中定义了一个Provider store。

【问题讨论】：

标签： reactjs react-redux redux-form

【解决方案1】：

您还没有指定Field 所需的component 属性，它应该是：

<Field 
   type="text" 
   className="trans login_input" 
   title="Username" 
   name="username" 
   placeholder="Username" 
   component="input"  
/>

查看here 获取文档

【讨论】：

【解决方案2】：

我认为您错误地将组件连接到 redux，试试这个，Ref

Signup = connect(
    mapStateToProps,
    mapDispatchToProps
)(Signup);

export default reduxForm({
    form: 'Signup'
})(Signup);

【讨论】：

@GrayCarry 我没有看到SingupAction 的任何导入。还要检查您是否导出了相同的内容。