reactjs - 在React js中使用redux表单时出现字段错误

Question

我试图在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)

我在代码中做错了什么，有人可以澄清我吗？

Answer 1

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

我假设您像这样导入表单:

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

您需要导入默认的:

import EditProfile from 'EditForm'; // Default export

从技术上讲，没有错误，当您从同一个文件导出两者时，babel 不会提示。在某些情况下，导出两者是有意义的(例如，出于测试目的导出未修饰的)。但在我的工作中，我更喜欢只有一个默认导出，以免搬起石头砸自己的脚。