Question

我正在使用redux向导表单进行编辑，在该表单中，我为向导中的每个页面将数据加载到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>
  );
}

Answer 1

对于表单1st，您需要创建通过mapStatetoprops和mapDispatchToProps连接表单的地图，并在mapstatetoprops中设置将在compomentdidmount期间填充的初始值然后在mapdispatchtoprops中调度将在更新过程中更新表单的动作。最后，在connect方法参数中传递mapdispatchtoprops和mapstatetoprops，并在连接的组件中导出表单像下面。 enter image description here

表单初始化后，Redux表单将无法更新新值

1 个答案: