当前位置 : 主页 > 网页制作 > React >

reactjs – 在React js中使用redux形式时出现字段错误

来源:互联网 收集:自由互联 发布时间:2021-06-15
我试图在react js中做一些表单验证,而使用redux表单面临一个错误字段必须在用reduxForm()修饰的组件内. 我刚刚在网上搜索了这个错误,但没有得到任何解决方案. 参考链接:http://redux-for
我试图在react js中做一些表单验证,而使用redux表单面临一个错误字段必须在用reduxForm()修饰的组件内.
我刚刚在网上搜索了这个错误,但没有得到任何解决方案.
参考链接:http://redux-form.com/6.8.0/examples/simple/.
这是我的代码,

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

export class EditProfile extends Component {
  render() {
    console.log("hello welcome");
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" component="input" type="text"/>
        </div>
      </form>
    );
  }
}


export default reduxForm({
  form: 'editForm' 
})(EditProfile)

我在代码中做错了,有人可以澄清我.

您有默认导出(使用reduxForm修饰)和命名导出(未装饰).

我假设您正在导入您的表单,如下所示:

import { EditProfile } from 'EditForm'; // Using named export

相反,您需要导入默认值:

import EditProfile from 'EditForm'; // Default export

从技术上讲,没有错误,因为你从同一个文件中导出两者,所以babel不会抱怨.在某些情况下,输出两者都是有意义的(例如出口未修饰的出于测试目的).但在我的工作中,我更喜欢只有一个默认输出,以防止自己在脚下射击.

网友评论