Javascript 用于创建和编辑的Redux表单

我正在使用redux表单。我需要创建一个新用户，并使用相同的表单更新用户信息。我现在已经创建了创建新用户所需的表单，但我不知道如何使其可用于更新

表单组件代码：

class UserRegistrationForm extends PureComponent {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    reset: PropTypes.func.isRequired,
    isLoading: PropTypes.bool,
    submitting: PropTypes.bool.isRequired,
  };

  constructor() {
    super();
    this.state = {
      showPassword: false,
    };
  }

  showPassword = (e) => {
    e.preventDefault();
    this.setState(prevState => ({ showPassword: !prevState.showPassword }));
  };

  onSubmit = data => {
    console.log(data);
  }

  render() {
    const { handleSubmit, reset } = this.props;

    return (
      <Col md={12} lg={12}>
        <Card>
          <CardBody>
            <div className="card__title">
              <h5 className="bold-text">STUDENT INFORMATION</h5>
            </div>
            <form className="form form--horizontal" onSubmit={handleSubmit}>
              <div className="form__form-group">
                <span className="form__form-group-label">First Name*</span>
                <div className="form__form-group-field">
                  <Field
                    name="name"
                    component="input"
                    type="text"
                    placeholder="Name"
                  />
                </div>
              </div>
              <div className="form__form-group">
                <span className="form__form-group-label">Last Name*</span>
                <div className="form__form-group-field">
                  <Field
                    name="surname"
                    component="input"
                    type="text"
                    placeholder="Surname"
                  />
                </div>
              </div>
              <div className="form__form-group">
                <span className="form__form-group-label">E-mail*</span>
                <div className="form__form-group-field">
                  <Field
                    name="email"
                    component="input"
                    type="email"
                    placeholder="example@mail.com"
                  />
                </div>
              </div>
              <ButtonToolbar className="form__button-toolbar">
                <Button color="primary" type="submit" className="icon" size="sm"><SendIcon /> Submit</Button>
                <Button type="button" onClick={reset} className="icon" size="sm">
                  <CloseIcon /> Cancel
                </Button>
              </ButtonToolbar>
            </form>
          </CardBody>
        </Card>
      </Col>
    );
  }
}

export default reduxForm({
  validate,
  form: 'User_Registration_Form', // a unique identifier for this form
})(withTranslation('common')(UserRegistrationForm));

class UserRegistrationForm扩展了PureComponent{
静态类型={
handleSubmit:PropTypes.func.isRequired，
重置：需要PropTypes.func.isRequired，
isLoading:PropTypes.bool，
提交：PropTypes.bool.isRequired，
};
构造函数（）{
超级（）；
此.state={
showPassword:false，
};
}
showPassword=（e）=>{
e、 预防默认值（）；
this.setState（prevState=>（{showPassword:！prevState.showPassword}））；
};
onSubmit=data=>{
控制台日志（数据）；
}
render（）{
const{handleSubmit，reset}=this.props；
返回(
学生信息
名字*
姓*
电子邮件*
提交
取消
);
}
}
导出默认reduxForm({
验证
表单：'用户\注册\表单'，//此表单的唯一标识符
})（带翻译（“通用”）（用户注册表））；

---

如何使表单在创建和更新时都可用？

要将同一表单用于更新，您需要为表单提供initialValues状态。其中初始值将是要编辑的学生的值。创建新学生时，“初始化”值将为空

UserRegistrationForm = reduxForm({
  validate,
  form: 'User_Registration_Form', // a unique identifier for this form
})(withTranslation('common')(UserRegistrationForm));
InitializeFromStateForm = connect(
  state => ({
    initialValues: studentData
  }),
)(InitializeFromStateForm)
export default UserRegistrationForm

这里就是一个例子

同样在react路由文件中，尝试使用相同的表单组件维护两个路由

<Route path="/student/create" component={UserRegistrationForm} />
<Route path="/student/update/:id" component={UserRegistrationForm} />

所以，每当需要创建时，就重定向到创建路由，当需要更新时，就重定向到更新路由，id为params