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

Question

我试图在 React js 中进行一些表单验证，而使用 redux 表单时遇到一个错误 Field must be inside a component decorated with reduxForm()。我刚刚在网上搜索了这个错误，但没有得到任何解决方案。参考 Link : 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 不会因为您从同一个文件中导出两者而报错。在某些情况下，将两者都导出是有意义的（例如，出于测试目的导出未修饰的）。但在我的工作中，我更喜欢只有一个默认导出，以防止搬起石头砸自己的脚。

Answer 2

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>
    );
  }
}
EditProfile = reduxForm({
  form: 'editForm' 
})(EditProfile)
export default EditProfile;

Answer 3

我也遇到了同样的问题。解决方案是编辑 /index.js 并添加以下代码行：

import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer,
});

const store = createStore(rootReducer);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

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

Field error while using redux form in React js

reactjs

redux

redux-form