Блог

Я использую Formik для проверки формы с помощью reactHooks и MaterialUI для дизайна, и он отлично работает с добавлением нового пользователя, но когда я использую его для редактирования пользовательских данных, я пытаюсь отредактировать данные и вызвать rest API для обновления, хотя метод отправки не запускается и никаких действий не выполняется.

Редактирование пользовательского компонента:

  const handleSubmitEditForm = async fields => {
        var userId = userEditModeOn.id;

        var isTrueSet = (fields.userActive === 'true');
        var userEditedObject =
        {
            "userId": userId,
            "userName": fields.userName.trim().toLowerCase(),
            "userEmail": fields.userEmail,
            "userPassword": fields.userPassword,
            "groupId": fields.groupId,
            "userActive": isTrueSet,
            "userCreatedDate": userDate
        }
        var editedObject = await axios.put(`${BACKEND_URL}/users/${userId}`, 
        userEditedObject).then(res => console.log(res));
        setNotification('edit');
    }
     <Formik
                validationSchema={UserSchema}
                initialValues={{
                    userName: "",
                    userEmail: "",
                    userPassword: "",
                    userPasswordConfirmation: "",
                    groupId: "",
                    userActive: ""
                }}
                onSubmit={handleSubmitEditForm}
            >
                {({ handleSubmit, setFieldValue }) => {
                    return (
                        <EditFormItems
                            userId={userEditModeOn.id}
                            handleSubmit={handleSubmit}
                            setFieldValue={setFieldValue}
                        />
                    )
                }}
            </Formik>
 

Изменить элемент формы

 export const EditFormItems = ({ handleSubmit, setFieldValue, userId }) => {

    return (
        <>
            <Form className="edit-project-form"
             onSubmit={handleSubmit}
            >
                <h1 >Add user</h1>
                <hr />
                <div>
                    <Field
                        label="Username"
                        name="userName"
                        component={TextFormField}
                    />
                </div>

                <div>
                    <Field
                        label="Email"
                        name="userEmail"
                        component={TextFormField}
                    />
                </div>

                <div>
                    <Field
                        label="Password"
                        name="userPassword"
                        component={TextFormField}
                        type="password"
                    />
                </div>

                <div>
                    <Field
                        options={groups}
                        label="Groups"
                        name="groupId"
                        component={SelectFormField}
                        keyName='groupId'
                        valueName='groupName'
                    />
                </div>

                <div>
                    <Field
                        options=
                        {
                            [
                                { "value": "true" },
                                { "value": "false" }
                            ]
                        }
                        label="User status"
                        name="userActive"
                        component={SelectFormField}
                        keyName="value"
                        valueName="value"
                    />
                </div>

                <Button variant="primary"
                    type="submit"
                >
                    Submit
                </Button>
            </Form>
        </>
    }