useEffect()를 사용하여 React-Hook-Form defaultValue를 변경하는 방법

useEffect()를 사용하여 React-Hook-Form defaultValue를 변경하는 방법

React-Hook-Form으로 개인 데이터를 갱신할 수 있는 페이지를 만들고 있습니다.일단 페이지가 로드되면useEffect사용자의 현재 개인 데이터를 가져와 양식의 기본값으로 설정합니다.

취득한 값을 에 입력했습니다.defaultValue의<Controller />그러나 텍스트 상자에 표시되지 않을 뿐입니다.코드는 다음과 같습니다.

import React, {useState, useEffect, useCallback} from 'react';
import { useForm, Controller } from 'react-hook-form'
import { URL } from '../constants';

const UpdateUserData = props => {
    const [userData, setUserData] = useState(null);
    const { handleSubmit, control} = useForm({mode: 'onBlur'});

    const fetchUserData = useCallback(async account => {
        const userData = await fetch(`${URL}/user/${account}`)
                            .then(res=> res.json());
        console.log(userData);
        setUserData(userData);
    }, []);

    useEffect(() => {
        const account = localStorage.getItem('account');
        fetchUserData(account);
    }, [fetchUserData])

    const onSubmit = async (data) => {
        // TODO
    }

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <div>
                    <label>User Name:</label>
                    <Controller
                        as={<input type='text' />}
                        control={control}
                        defaultValue={userData ? userData.name : ''}
                        name='name'
                    />
                </div>
                
                <div>
                    <label>Phone:</label>
                    <Controller
                        as={<input type='text' />}
                        control={control}
                        defaultValue={userData ? userData.phone : ''}
                        name='phone'
                    />
                </div>
                <button>Submit</button>
            </form>
        </div>
    );
}

export default UpdateUserData;

호출된 API는 정상적으로 작동하고 있으며 값은 실제로 다음과 같이 설정되어 있습니다.userData주.

{
  name: "John",
  phone: "02-98541566"
  ...
}

저도 노력했어요.setUserData모의 데이터를 사용하여useEffect(), 그것도 작동하지 않습니다.위 코드에 문제가 있나요?

@http: version 6.8.3에서 동작하기 위해 필요한 것은 절반 정도밖에 없습니다.

기본값을 제공해야 하지만 리셋하려면 효과도 사용해야 합니다.다른 엔티티를 사용하여 새로고침하는 형식이 있는 경우 이 특별한 구별이 필요합니다.여기 Code Sanbox에 완전한 예가 있습니다.

요약: defaultValues를 정의해야 합니다.userForm.

 const { register, reset, handleSubmit } = useForm({
    defaultValues: useMemo(() => {
      return props.user;
    }, [props])
  });

그리고 잠재적인 변화에 귀를 기울일 필요가 있습니다.

  useEffect(() => {
    reset(props.user);
  }, [props.user]);

코드 샌드박스의 예에서는 두 사용자 간의 스왑을 허용하고 폼에서 값을 변경할 수 있습니다.

setValue(https://react-hook-form.com/api/useform/setvalue)를 사용할 수 있습니다.

useForm에서 가져오기:

const { handleSubmit, control, setValue} = useForm({ mode: 'onBlur' });

그런 다음 수신된 사용자 데이터를 사용하여 호출합니다.

useEffect(() => {
    if (userData) {
        setValue([
            { name: userData.name }, 
            { phone: userData.phone }
        ]);
    }
}, [userData]);

양식에서 기본값을 제거할 수 있습니다.

편집: 이 방법으로 동작하지 않는 경우는, 다음의 대체 회답을 참조해 주세요.

setValue나한테는 통하지 않았어또는 다음 방법을 사용할 수 있습니다.

전체 양식 상태 또는 일부 양식 상태를 재설정합니다.

작업 코드는 다음과 같습니다.

 /* registered address */
const [registeredAddresses, setRegisteredAddresses] = useState([]);

const { register, errors, handleSubmit, reset } = useForm <FormProps> ({
    validationSchema: LoginSchema,
});

/**
 * get addresses data
 */
const getRegisteredAddresses = async () => {
    try {
        const addresses = await AddressService.getAllAddress();
        setRegisteredAddresses(addresses);
        setDataFetching(false);
    } catch (error) {
        setDataFetching(false);
    }
};

useEffect(() => {
    getRegisteredAddresses();
}, []);

useEffect(() => {
    if (registeredAddresses) {
        reset({
            addressName: registeredAddresses[0].name,
            tel: registeredAddresses[0].contactNumber
        });
    }
}, [registeredAddresses]); 

다른 쉬운 방법을 찾아서resetuseForm의 API

 const { handleSubmit, register, reset } = useForm({ resolver });

API를 호출하고 응답 데이터를 받은 후reset새로운 apiData를 사용하여 apiData 키가 입력 키(이름 속성)와 동일한지 확인합니다.

 useEffect(() => {
    reset(apiData);
  }, [apiData]);

폼의 기본값은 캐시되므로 API에서 데이터를 가져오면 폼 상태를 새로운 데이터로 리셋합니다.

@tommcandrew의 setValue 파라미터 포맷이 작동하지 않았습니다.

이 포맷은 다음과 같습니다.

useEffect(() => {
  const object = localStorage.getItem('object');
  setValue("name", object.name);
}, [])

이 게시물은 2개월이 지났지만, 오늘 우연히 이 문제를 발견하고 몇 가지 방법을 찾아봤습니다.가장 효과적인 방법은 다음과 같이 useMemo를 사용하여 defaultValues를 설정하는 것입니다.

const { control, errors, handleSubmit } = useForm({
    reValidateMode: 'onChange',
    defaultValues: useMemo(() => yourDefaultValues, [yourDefaultValues]),
});

이것에 의해, 필드 어레이가 있는 경우에서도, 복수의 실장에 고생하지 않고, 폼의 값을 적절히 설정할 수 있습니다.

이 기능은 공식 문서의 예를 들어 고급 스마트 폼 구성 요소를 사용하는 경우에도 작동합니다.질문이 있으면 알려주세요!

이것은 네스트된 오브젝트에 대해 기능합니다(버전 6.15.1을 사용하고 있습니다).

useEffect(() => {
    for (const [key, value] of Object.entries(data)) {
        setValue(key, value, {
            shouldValidate: true,
            shouldDirty: true
        })
    }
}, [data])

「」를 사용합니다.reset간단한 해결책입니다.

const { reset } = useForm();


onClick={()=> reset({ firstname: 'Joe' }, { lastname: 'Doe' }) }

react-hook-form 7.41 에서는 다음과 같은 비동기 함수와 함께 defaultValues를 사용할 수 있습니다.

const {
  formState: { isLoading },
} = useForm({
  defaultValues: fetch('API'),
  // resetOptions: {
  //   keepDirtyValues: true
  // }
});

defaultValue 필드 유형은 다음과 같습니다.

type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;

async defaultValues 로드 상태의 isLoading.

언급URL : https://stackoverflow.com/questions/62242657/how-to-change-react-hook-form-defaultvalue-with-useeffect