Я использую форму мастера редукции для редактирования, в которой я загружаю данные в 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
<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" />
Previous
</Button>
<Button
color="primary"
className="btn-pill pull-right"
type="submit"
style={{ marginRight: '20px' }}
>
Next
<i className="fa fa-chevron-right" />
</Button>
</div>
</Card>
</Col>
</form>
);
}