web-dev-qa-db-ja.com

React jsでreduxフォームを使用中のフィールドエラー

私はreactjsでいくつかのフォーム検証を行おうとしていましたが、reduxフォームを使用すると1つのエラーが発生しますフィールドはreduxForm（）で装飾されたコンポーネント内にある必要があります。 Webでこのエラーを検索しましたが、解決策が見つかりませんでした。参照リンク：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)

私が自分のコードで間違ったことを、誰かが私を明確にすることができますか？.

reactjsreduxredux-form
5
Beckham Vinoth

デフォルトのエクスポート（reduxFormで装飾されている）と名前付きエクスポート（装飾されていない）の両方があります。

次のようにフォームをインポートしていると仮定します。

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

代わりに、デフォルトのものをインポートする必要があります。

import EditProfile from 'EditForm'; // Default export

技術的にはエラーはなく、同じファイルから両方をエクスポートしているので、babelは文句を言いません。また、場合によっては、両方をエクスポートすることが理にかなっています（たとえば、テスト目的で装飾されていないものをエクスポートする）。しかし、私の仕事では、自分の足を撃たないように、デフォルトのエクスポートを1つだけにすることを好みます。

11
Igor Barbashin
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;
0
Sadam Hussain