フォームが初期化されると、Reduxフォームは新しい値を更新できません

ニディンクマール

編集にreduxウィザードフォームを使用しており、ウィザードの各ページのcomponentDidMountにデータを読み込んでいます。しかし、値を更新して次のページに移動すると、更新された値は2番目の形式で反映されませんが、前のページに移動すると、更新された値ではなく初期値が読み込まれます。誰かが私のコードの何が問題なのか教えてもらえますか?

最初のフォーム:

componentDidMount() {
const users = this.props.users;
let user = {};
user = users[this.props.userID];
this.setState({file: user.profilePicture});
this.props.initialize(user);
console.log('user is', user);
}

render() {


const { handleSubmit } = this.props;
  const age = (value) => (value == null ? '' : this.state.age);
  return (
    <form onSubmit={handleSubmit}>
      <Col sm="12">
        <Card className="card-border">
          <CardBody>
            <FormGroup row>
              <Col xs="12" lg="2">
                <img
                  src={this.state.file}
                  style={{width: 125, height: 125}}
                  className="img-avatar"
                />
              </Col>
              <Col xs="12" lg="10">
                <Field
                  type="file"
                  id="file-input"
                  name="image"
                  accept="image/*"
                  component={ImageUpload}
                  label="Upload User Image *"
                  validation="fieldRequired"
                  className="fileLoader"
                  onChange={this.handleChange}
                />
              </Col>
            </FormGroup>
            <FormGroup row>
              <Col xs="12" lg="6">
                <Field
                  name="name"
                  type="text"
                  component={FormInput}
                  label="Name *"
                  inputPlaceHolder="Enter Name"
                  normalize={captialize}
                />
              </Col>
              <Col xs="12" lg="6">
                <Field
                  name="mobileNo"
                  type="text"
                  component={FormInput}
                  label="Mobile No *"
                  inputPlaceHolder="+91"
                  normalize={mobile}
                />
              </Col>
            </FormGroup>
          </CardBody>
          <div style={{ paddingBottom: 30 }}>
            <Button color="primary" className="btn-pill pull-right" type="submit" style={{marginRight: '20px'}}>
               Next &nbsp;
              <i className="fa fa-chevron-right" />
            </Button>
          </div>
        </Card>
      </Col>
    </form>
  );
} 
}

export default reduxForm({
  form: 'userEditForm',
  keepDirtyOnReinitialize: true,
  enableReinitialize: true,
  validate
})(UserGeneralForm);

2番目の形式:

componentDidMount() {
    const users = this.props.users;
    let user = {};
    user = users[this.props.userID];
    this.props.initialize(user);
    console.log('users detail in Personaldetail form', user);
  }


 render() {
  const { handleSubmit, previousPage } = this.props;
  const users = this.props.users;
  let user = {};
  user = users[this.props.userID];
  return (
    <form onSubmit={handleSubmit}>
      <Col sm="12">
        <Card className="card-border">
          <CardBody>
            <Field
              name="address"
              type="textarea"
              component={FormInput}
              label="Address *"
              inputPlaceHolder="Enter Address"
            />
            <FormGroup row>
              <Col xs="12" lg="6">
                <Field
                  name="pincode"
                  type="text"
                  component={FormInput}
                  label="Pin Code *"
                  inputPlaceHolder="Enter Pin Code"
                  normalize={pinCode}
                />
              </Col>
              <Col xs="12" lg="6">
                <Field
                  name="qualification"
                  type="text"
                  component={FormInput}
                  label="Qualifications *"
                  inputPlaceHolder="Enter Qualifications"
                />
              </Col>
            </FormGroup>
            <FormGroup row>
              <Col xs="12" lg="6">
                <Field
                  name="userOccupation"
                  type="text"
                  component={FormInput}
                  label="Occupation *"
                  inputPlaceHolder="Enter Occupation"
                />
              </Col>

              <Col xs="12" lg="6">
                <Field
                  name="income"
                  type="text"
                  component={FormInput}
                  label="Annual Income *"
                  inputPlaceHolder="Enter Annual Income"
                  normalize={salary}
                />
              </Col>
            </FormGroup>
            <FormGroup row>
              <Col xs="12" lg="6">
                <Field
                  name="pan"
                  type="text"
                  component={FormInput}
                  label="PAN No *"
                  inputPlaceHolder="Enter PAN number"
                  normalize={(upper, pan)}
                />
              </Col>

              <Col xs="12" lg="6">
                <Field
                  name="aadhaar"
                  type="text"
                  component={FormInput}
                  label="Aadhaar No *"
                  inputPlaceHolder="Enter Aadhaar number"
                  normalize={aadhaar}
                />
              </Col>
            </FormGroup>
            <FormGroup row>
              <Col xs="12" lg="6">
                <FormGroup>
                  <Field
                    name="maritalStatus"
                    component={DropDowns}
                    label="Marital Status *"
                    selectPlaceHolder="Please Select Marital Status"
                    datas={constants.maritalStatus}
                    editedData={user.maritalStatus}
                  />
                </FormGroup>
              </Col>
              <Col xs="12" lg="6">
                <FormGroup>
                  <Field
                    name="gender"
                    component={DropDowns}
                    label="Gender *"
                    selectPlaceHolder="Please Select Gender"
                    datas={constants.gender}
                    editedData={user.gender}
                  />
                </FormGroup>
              </Col>
            </FormGroup>
          </CardBody>
          <div style={{ paddingBottom: 30 }}>
            <Button
              color="primary"
              className="btn-pill pull-left"
              onClick={previousPage}
              style={{ marginLeft: '20px' }}
            >
              <i className="fa fa-chevron-left" />
              &nbsp; Previous
            </Button>
            <Button
              color="primary"
              className="btn-pill pull-right"
              type="submit"
              style={{ marginRight: '20px' }}
            >
              Next &nbsp;
              <i className="fa fa-chevron-right" />
            </Button>
          </div>
        </Card>
      </Col>
    </form>
  );
}
ヴィシャルグプタ

フォーム1の場合、mapStatetopropsとmapDispatchToPropsを介してフォームを接続するために作成する必要があり、mapstatetopropsで、compomentdidmount中に入力される初期値を設定し、mapdispatchtopropsで、更新中にフォームを更新するアクションをディスパッチします。最後に、mapdispatchtopropsを渡します。接続メソッド引数のmapstatetopropsを使用して、以下のように接続されたコンポーネントにフォームをエクスポートします。 ここに画像の説明を入力してください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Reduxフォームでは、フォームの初期化状態の値を編集できません

分類Dev

新しいフォームでは、メインフォームに戻ることはできません

分類Dev

FormGroupに新しいエラーがあると、AngularReactiveフォームが更新されません

分類Dev

Booking.comフォームを1回初期化できますが、ngOnInitでは再度初期化できません

分類Dev

デフォルトでAJAXフォームデータを送信しないようにすると、フロントエンドが更新されませんか?

分類Dev

Django:初期外部キー値がないとフォームを検証できません

分類Dev

フォームが新しいタブで開きません

分類Dev

フォームは新しい値を取りません

分類Dev

投稿で「値をデコードできません」と表示されているフォームクロムを送信している間

分類Dev

フォーム2から新しいレコードが追加されても、Access2007フォーム1は更新されません。

分類Dev

PdfCopyとiTextを使用したフォーム値:フォーム値は表示されません

分類Dev

Reduxフォーム:initialValuesはフォーム値を設定しません

分類Dev

Redux-フォームフィールドは、その中の<input>の値で更新されません

分類Dev

vue.jsフォームの送信でmodel-bindの新しい値が取得されませんでした

分類Dev

Django WebTest-フォームに入力して保存すると、データは新しいページで更新されますが、データベースでは更新されません

分類Dev

Antd 3.26フォーム検証メッセージは、状態/小道具が変更されているときに新しい値で再レンダリングされません

分類Dev

FormikフォームでinitialValuesプロップを更新しても、入力値は更新されません

分類Dev

Accessは参照されたフォームを見つけることができません

分類Dev

jquery ajaxが入力されたasp:dropdownは、フォームを保存するときに選択した値をサーバー側に渡しません

分類Dev

Djangoは移行を行うことができません:フォロワー用のフォームフィールドをまだ作成できません。関連するモデル「self」がまだロードされていないため

分類Dev

Reduxフォームは値を変更しません

分類Dev

HTMLフォームを送信しようとすると、「POSTできません」というエラーが表示されます

分類Dev

HTMLフォームを送信しようとすると、「POSTできません」というエラーが表示されます

分類Dev

SSLv3を無効にすることはできません。フォローされているガイドとフォーラムの投稿

分類Dev

ajaxフォームはページを更新しないと再送信されません

分類Dev

javascript:jsonからhtmlフォームを作成しましたが、フォームを更新できません

分類Dev

jQueryを使用してセクション化されたフォームフィールドを追加し、異なる値が追加されたときに更新するにはどうすればよいですか?

分類Dev

メインフォームの値を更新できません

分類Dev

react / reduxフォームを送信するときに、PHPでPOST値を取得できません

Related 関連記事

  1. 1

    Reduxフォームでは、フォームの初期化状態の値を編集できません

  2. 2

    新しいフォームでは、メインフォームに戻ることはできません

  3. 3

    FormGroupに新しいエラーがあると、AngularReactiveフォームが更新されません

  4. 4

    Booking.comフォームを1回初期化できますが、ngOnInitでは再度初期化できません

  5. 5

    デフォルトでAJAXフォームデータを送信しないようにすると、フロントエンドが更新されませんか?

  6. 6

    Django:初期外部キー値がないとフォームを検証できません

  7. 7

    フォームが新しいタブで開きません

  8. 8

    フォームは新しい値を取りません

  9. 9

    投稿で「値をデコードできません」と表示されているフォームクロムを送信している間

  10. 10

    フォーム2から新しいレコードが追加されても、Access2007フォーム1は更新されません。

  11. 11

    PdfCopyとiTextを使用したフォーム値:フォーム値は表示されません

  12. 12

    Reduxフォーム:initialValuesはフォーム値を設定しません

  13. 13

    Redux-フォームフィールドは、その中の<input>の値で更新されません

  14. 14

    vue.jsフォームの送信でmodel-bindの新しい値が取得されませんでした

  15. 15

    Django WebTest-フォームに入力して保存すると、データは新しいページで更新されますが、データベースでは更新されません

  16. 16

    Antd 3.26フォーム検証メッセージは、状態/小道具が変更されているときに新しい値で再レンダリングされません

  17. 17

    FormikフォームでinitialValuesプロップを更新しても、入力値は更新されません

  18. 18

    Accessは参照されたフォームを見つけることができません

  19. 19

    jquery ajaxが入力されたasp:dropdownは、フォームを保存するときに選択した値をサーバー側に渡しません

  20. 20

    Djangoは移行を行うことができません:フォロワー用のフォームフィールドをまだ作成できません。関連するモデル「self」がまだロードされていないため

  21. 21

    Reduxフォームは値を変更しません

  22. 22

    HTMLフォームを送信しようとすると、「POSTできません」というエラーが表示されます

  23. 23

    HTMLフォームを送信しようとすると、「POSTできません」というエラーが表示されます

  24. 24

    SSLv3を無効にすることはできません。フォローされているガイドとフォーラムの投稿

  25. 25

    ajaxフォームはページを更新しないと再送信されません

  26. 26

    javascript:jsonからhtmlフォームを作成しましたが、フォームを更新できません

  27. 27

    jQueryを使用してセクション化されたフォームフィールドを追加し、異なる値が追加されたときに更新するにはどうすればよいですか?

  28. 28

    メインフォームの値を更新できません

  29. 29

    react / reduxフォームを送信するときに、PHPでPOST値を取得できません

ホットタグ

アーカイブ