Reputation: 3023
I have build a redux form it's a user profile form where user can edit profile detail For that. I want to put initial Value that is available in backend after that they can edit them as well. But I tried the way doc says https://redux-form.com/6.0.0-alpha.4/examples/initializefromstate/ but It is not working at all. I am getting initial value from api and storing it in redux store.
EditFormPage.jsx
let EditProfileForm =(props) => {
const [image, setImage] = useState(null);
const {handleSubmit, pristine, reset, submitting, classes} = props;
const dispatch = useDispatch();
const getDroppedImage = (imageSrc) => {
setImage(imageSrc);
}
const getCroppedImage = (imageUrl) =>{
//props.getProfileImage(imageUrl);
dispatch(uploadProfileImage(imageUrl));
}
const data = {
profilePic : props.profileDetail.profilePic,
name : 'Hell ow',
dob : props.profileDetail.dateOfBirth,
sex: props.profileDetail.gender,
contact: props.profileDetail.phoneNumber,
address: props.profileDetail.address
}
useEffect(() => {
load(data);
}, [data])
return (
<Grid container className={"container edit_profile"}>
<Grid className="profile_menu global-padding" container>
<form onSubmit={handleSubmit}>
<Grid
container
alignItems="center"
justify="flex-end"
className="profile_menu_list"
xs={12}
>
<Field
type="file"
name="profilePic"
component={EditDropZone}
image={image}
getDroppedImage={getDroppedImage}
/>
</Grid>
<Grid
container
alignItems="center"
justify="flex-end"
className="profile_menu_list"
xs={12}
>
<Field name="name" component={renderInputField} />
</Grid>
<Grid
container
alignItems="center"
justify="flex-end"
className="profile_menu_list"
xs={12}
>
<Field
name="dob"
showTime={false}
component={renderDateTimePicker}
/>
</Grid>
<Grid
container
alignItems="center"
justify="flex-end"
className="profile_menu_list"
xs={12}
>
<Field style={{flexDirection: 'row'}} name="sex" component={renderRadioButton}>
<RadioButton value="male" label="male"/>Male
<RadioButton value="female" label="female"/>Female
</Field>
</Grid>
<Grid
container
alignItems="center"
justify="flex-end"
className="profile_menu_list"
xs={12}
>
<Field name="contact" normalize={normalizePhone} component={renderInputField} />
</Grid>
<Grid
container
alignItems="center"
justify="flex-end"
className="profile_menu_list"
xs={12}
>
<Field name="address" component={renderInputField} />
</Grid>
<div style={{paddingTop: '20px'}}>
<LoadingButton type={"submit"} title={'Save'}/>
</div>
</form>
</Grid>
<Grid xs={12}>
<ImageModal
getCroppedImage={getCroppedImage}
image={image}
/>
</Grid>
</Grid>
</Grid>
)
}
EditProfileForm = reduxForm({
form: 'EditProfileForm',
validate
})(EditProfileForm);
EditProfileForm = connect(
state => ({
initialValues: state.editProfileData.profileData
}),{load: load }
)(EditProfileForm)
export default EditProfileForm;
Any help would be great I am stuck here.
Upvotes: 1
Views: 285
Reputation: 543
You will need to pass enableReinitialize: true
in the form.
Since you are passing values by the API calls, there would be some delay.
But Redux-form tried to show default value which is still undefined.
So, you would not be able to show default values from the API calls.
by enabling this option, when props are updated, your profile form will show those values as default.
EditProfileForm = reduxForm({
form: 'EditProfileForm',
enableReinitialize: true, // need to set as True to reflect updated props.
validate
})(EditProfileForm);
EditProfileForm = connect(
state => ({
initialValues: state.editProfileData.profileData
}),{load: load }
)(EditProfileForm)
Upvotes: 1