Question

我有一个组件，其中我有向导表格，第一个选项卡将询问学生的标记详细信息，第二个选项卡将询问学生的基本详细信息。因此，从Cookie中我可以在第二个选项卡上获得用户名，例如自动填充。

所以我的整个组件都由index.js，Wizardformmarks和Wizardformdetails组成。

index.js

render(){
  return(
   <WizardFormMarks initialValues={this.props.initialValues}/>
   <WizardFormDetails initialValues={this.props.initialValues}/>
   ) 
}



 const mapStateToProps = (state) => {
  let initialValuesCopy = state.initialValues || {}
  initialValuesCopy.username = extractValue("username") // from cookie
  return {
    initialValues: initialValuesCopy
  };
}



const mapDispatchToProps = (dispatch) => ({
     // fetching the user details since same component is used for editing also , so to fetch details this api will perform only if in route params are there like localhost:3000/student/test1, 
    })

Student = connect(
  mapStateToProps,
  mapDispatchToProps
)(Student);

   export default Student

wizardformmarks.js

export default reduxForm({
  form: 'wizard', //                 
  destroyOnUnmount: false, 
  forceUnregisterOnUnmount: true,
  enableReinitialize: true
})(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(WizardFormMarks)
);

wizardformdetails.js

render(){
  return(
   <div>
     <Field
       name="username"
       type="text"
       component={customField}
       label="Enter your name.."
       disabledStatus={true}
     />
  </div>
 )
}

export default reduxForm({
  form: 'wizard', 
  destroyOnUnmount: false, 
  forceUnregisterOnUnmount: true, 
})(WizardFormDetails);

还使用相同的组件进行编辑和创建。编辑，创建和在编辑时，如果我移至其他组件，则数据将保持不变。但是在创建数据时，如果我转到另一个组件并返回，则该数据将不会保留。即使将destroyOnUnmount设置为 false 。

如何保存数据。同样，initialValues redux默认状态为”。这就是为什么我检查并分配对象的原因。

一旦componentUnMounts，redux表单数据就不会持久化

0 个答案: