Форма Redux не может обновлять новые значения после инициализации формы - PullRequest
0 голосов
/ 13 октября 2018

Я использую форму мастера редукции для редактирования, в которой я загружаю данные в componentDidMount для каждой страницы в мастере.Но когда я обновляю значения и перехожу на следующую страницу, обновленное значение не перезагружается во второй форме, тогда как если я перехожу на предыдущую страницу, он загружает начальные значения вместо обновленных значений.Может кто-нибудь сказать мне, что не так в моем коде:

Первая форма:

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);

Вторая форма:

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 Ответ

0 голосов
/ 13 октября 2018

Для формы 1 вам нужно создать соединение вашей формы через mapStatetoprops и mapDispatchToProps, а в mapstatetoprops установить ваши начальные значения, которые будут заполняться во время compomentdidmount, а в mapdispatchtoprops отправлять действие, которое обновит вашу форму во время обновления .... И в концепередайте ваши mapdispatchtoprops и mapstatetoprops в аргументах метода connect и экспортируйте вашу форму в подключенный компонент, как показано ниже.enter image description here

...