State hooks does not update state parameters on redux store update

Question

I have and update user page. There exists a simple form based on functional component. I use hooks in order to work with state and input params. Default params(which can be changed) I get from redux store(I fetch them in useEffect). After page load store changes, bot hooks does not update necessary properties in form and there are empty inputs. How can I supposed, that after store update hookk would update state, but no. How can I solve this problem?

component:

const EditUserPage: React.FunctionComponent = () => {
    const dispatch = useDispatch();
    const history = useHistory();
    const {profileId} = useParams();
    
    useEffect(() => {
        dispatch(getRolesList());
        console.log("URL PARAM=", profileId)
        dispatch(getProfileById(parseInt(profileId)));
    }, []);
    
    
    const isEmailDuplicated: boolean = useSelector(getEmailDuplicated);
    const rolesList: Array = useSelector(userRolesList);
    const contetType: string = useSelector(adminContentType);
    const userProfileData: PlainObject = useSelector(selectedUserProfile);

    const [startDate, setStartDate] = useState(new Date());
    const [firstName, setFirstName] = useState(userProfileData.firstName);
    const [lastName, setLastName] = useState(userProfileData.lastName ? userProfileData.lastName : "");
    const [role, setRole] = useState(userProfileData.user && userProfileData.user.roles[0].name);
    const [gender, setGender] = useState(userProfileData.gender ? userProfileData.gender : "");
    const [address, setAddress] = useState(userProfileData.address ? userProfileData.address : "");
    const [phone, setPhone] = useState(userProfileData.telephone ? userProfileData.telephone : "");
    const [office, setOffice] = useState(userProfileData.office ? userProfileData.office : "");
    const [socialNumber, setSocialNumber] = useState(userProfileData.socialNumber ? userProfileData.socialNumber : "");
    const [about, setAbout] = useState(userProfileData.about ? userProfileData.about : "");
    const [login, setLogin] = useState(userProfileData.email ? userProfileData.email : "");

    const roleDropdownOptions = rolesList && rolesList.map((role) => {
        console.log("?????",userProfileData)
        return {
            key: role.id,
            text: role.name.toLowerCase(),
            value: role.name,
        }
    })

    //validate email
    const mailRegex = new RegExp(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g);
    const isMailValid = login && mailRegex.test(login);

    //validate phone number
    const phoneRegex = new RegExp(/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s./0-9]*$/g)
    const isPhoneValid = phone && phoneRegex.test(phone);
    
    const handleSubmit = (event: { preventDefault: () => void; }) => {
        const dateFormat = require("dateformat");

        event.preventDefault();

        userProfileData["firstName"] = firstName;
        userProfileData["lastName"] = lastName;
        userProfileData["email"] = login;
        userProfileData["telephone"] = phone;
        userProfileData["about"] = about;
        userProfileData["office"] = office;
        userProfileData["address"] = address;
        userProfileData["socialNumber"] = socialNumber;
        userProfileData["dateOfBirth"] = dateFormat(startDate, "yyyy-mm-dd");
        userProfileData["gender"] = gender;

        const promise = new Promise(() => {
            return dispatch(updateProfile(userProfileData));
        })

        promise
            .then(() => history.push("/admin"))
            .then(() => {
                if (contetType === adminContentTypes.PERSONAL) {
                    dispatch(getPersonalProfiles());
                } else {
                    dispatch(getPatientProfiles());
                }
            })
    }

    return (
        
            
                EDIT USER
            
            
            
                {
                    isEmailDuplicated &&
                    
                }
                
                    ) => setFirstName(e.target.value)}
                    />
                    ) => setLastName(e.target.value)}
                    />
                    ) => setLogin(e.target.value)}
                    />
                
                
                
                    , data: PlainObject) => {
                            event.preventDefault();
                            setRole(data.value);
                        }}
                    />
                    , data: PlainObject) => setGender(data.value)}
                    />
                    ) => setOffice(e.target.value)}
                    />
                    
                        
                            Date of birth
                        
                        

                         {
                                setStartDate(date)
                            }}
                            peekNextMonth
                            showMonthDropdown
                            showYearDropdown
                            dropdownMode="select"
                        />
                    
                
                
                
                    ) => setAddress(e.target.value)}
                    />
                    ) => setPhone(e.target.value)}
                        error={!isPhoneValid && phone ? {
                            content: "Please enter a valid phone number",
                            pointing: "below",
                        } : false}
                    />
                    , data: PlainObject) => setAbout(data.value)}
                    />

                
                
                
                    ) => setSocialNumber(e.target.value)}
                    />
                
                
                
                
            
        
    );
}

export default EditUserPage;

Mike Rivet · Accepted Answer

I think you'll want another useEffect that watches for changes on userProfileData.

Right now you're initializing all your hooks state variables with the userProfileData, but on the first pass that data is empty.

When the store updates the userProfileData value should change but this component isn't set up to do anything with it.

const [firstName, setFirstName] = useState(userProfileData.firstName);

If you also had a hook below that calls the set callbacks it should update once the store does.

useEffect(() => {
setFirstName(userProfileData.firstName);
}, [userProfileData])'

This might cause issues if you run into a scenario where

User has entered information
Store updates

If that instance is a possibility you could add logic at the beginning of the useEffect to not update the field if it's already been updated.

State hooks does not update state parameters on redux store update

Answers (1)

Related Questions