reactjs - isDirty state is set to true when form is initialized - Stack Overflow

admin管理员组

文章数量:1123589

I know react-hook-form does not set isDirty state true byDefault, but for some unknown reasons, My form's isDirty state is being set as true when the form is initialized.

Here's my code:

const {
        register,
        handleSubmit,
        watch,
        setValue,
        setError,
        control,
        formState: { isSubmitting, errors, isDirty },
    } = useForm<IEditProfileAboutForm>({
        defaultValues: defaultValues,
        resolver: zodResolver(aboutFormSchema),
    })       

    const {
        fields: socialMediaLinksFields,
        append: socialMediaLinksAppend,
        remove: socialMediaLinksRemove,
    } = useFieldArray({
        control,
        name: 'social_media_links',
    })

    const {
        fields: otherLinksFields,
        append: otherLinksAppend,
        remove: otherLinksRemove,
    } = useFieldArray({
        control,
        name: 'other_links',
    })

    const {
        fields: customFieldsFields,
        append: customFieldsAppend,
        remove: customFieldsRemove,
    } = useFieldArray({
        control,
        name: 'custom_field',
    })

Below is my defaultValues object:

const defaultValues = {
            about: userData?.about || '',
            about_video: userData?.about_video || '',
            about_image_file: userData?.about_image_file || null,
            about_image: userData?.about_image || '',
            about_image_url: userData?.about_image_url || '',
            company_about: userData?pany?.about || '',
            company_about_video: userData?pany?.about_video || '',
            social_media_links:
                (isIndividualUser
                    ? userData?.social_media_links
                    : userData?pany?.social_media_links
                )?.map((link: any, index: number) => {
                    return {
                        ...link,
                        is_allow_to_personalize: link?.is_allow_to_personalize,
                        link: link?.is_allow_to_personalize
                            ? userData?.social_media_links?.find(
                                  (item: any) => item.id === link.id,
                              )?.link || link?.link
                            : link?.link,
                        url: link?.is_allow_to_personalize
                            ? userData?.social_media_links?.find(
                                  (item: any) => item.id === link.id,
                              )?.url ||
                              link?.url ||
                              ''
                            : link?.url || '',
                    }
                }) || [],
            other_links:
                (isIndividualUser
                    ? userData?.other_links
                    : userData?pany?.other_links
                )?.map((link: any, index: number) => {
                    return {
                        ...link,
                        is_allow_to_personalize: link?.is_allow_to_personalize,
                        url: link?.is_allow_to_personalize
                            ? userData?.other_links?.find(
                                  (item: any) => item.id === link.id,
                              )?.url ||
                              link?.url ||
                              ''
                            : link?.url || '',
                        field_name: link?.is_allow_to_personalize
                            ? userData?.other_links?.find(
                                  (item: any) => item.id === link.id,
                              )?.field_name ||
                              link?.field_name ||
                              ''
                            : link?.field_name || '',
                    }
                }) || [],
            custom_field:
                (isIndividualUser
                    ? userData?.custom_field
                    : userData?pany?.custom_field
                )?.map((link: any, index: number) => {
                    return {
                        ...link,
                        is_allow_to_personalize: link?.is_allow_to_personalize,
                        field_value: link?.is_allow_to_personalize
                            ? userData?.custom_field?.find(
                                  (item: any) => item.id === link.id,
                              )?.field_value || link?.field_value
                            : link?.field_value,
                    }
                }) || [],
        }

After this if i console.log({isDirty}), I'm getting below output:

now one might bethinking that i might be setting values in useEffect using setValue.

But below is the only useEffect i have in this component:

    useEffect(() => {
        if (Object.values(errors)?.length > 0) {
            helper.ToastSchemaErrorMessages(errors)
            setIsFormLoading(false)
        }
    }, [errors])

I've been trying to fix this issue for hrs, let me know if you guys find something fishy in my code!

Thanks in advance!

本文标签： reactjsisDirty state is set to true when form is initializedStack Overflow