• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

2.1K
Views
¿Cómo cambiar el valor predeterminado de React-Hook-Form con useEffect ()?

Estoy creando una página para que el usuario actualice sus datos personales con React-Hook-Form. Una vez que se carga paginado, uso useEffect para obtener los datos personales actuales del usuario y establecerlos en el valor predeterminado del formulario.

Puse el valor obtenido en defaultValue of <Controller /> . Sin embargo, simplemente no se muestra en el cuadro de texto. Aquí está mi código:

 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;

La API llamada funciona bien y el valor se establece userData en el estado de datos de usuario.

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

También intenté establecerUserData con datos simulados en setUserData useEffect() , y tampoco funciona. ¿Hay algún problema en mi código anterior?

over 3 years ago · Santiago Trujillo
7 answers
Answer question

0

Puede usar setValue ( https://react-hook-form.com/api/useform/setvalue ).

Importarlo desde useForm:

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

Luego llámelo con los datos del usuario después de que se reciba:

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

Puede eliminar los valores predeterminados del formulario.

EDITAR: vea las respuestas alternativas a continuación si esto no funciona.

over 3 years ago · Santiago Trujillo Report

0

setValue no funcionó para mí. Alternativamente, puede usar el método de reset :

Restablezca todo el estado del formulario o parte del estado del formulario.

Aquí está el código de trabajo:

 /* 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]);
over 3 years ago · Santiago Trujillo Report

0

El formato del parámetro setValue de @tommcandrew no funcionó para mí.

Este formato hizo:

 useEffect(() => { const object = localStorage.getItem('object'); setValue("name", object.name); }, [])
over 3 years ago · Santiago Trujillo Report

0

aunque esta publicación tiene 2 meses, me topé con este problema hoy y busqué un par de formas de hacerlo. La forma más efectiva que se me ocurrió es usar useMemo para establecer sus valores predeterminados, así:

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

Esto le permite establecer correctamente los valores en su formulario, sin la lucha de múltiples implementaciones si tiene matrices de campo (que fue mi caso).

Esto también funciona mientras se usa el ejemplo de componente de formulario inteligente avanzado de la documentación oficial. Hazme saber si tienes alguna pregunta !

over 3 years ago · Santiago Trujillo Report

0

La respuesta de @tam está a la mitad de lo que se necesita para que funcione con la versión 6.8.3.

Debe proporcionar el valor predeterminado pero también usarEffect para restablecer. Se requiere esa distinción particular si tiene un formulario que recarga con otra entidad. Tengo un ejemplo completo en CodeSanbox aquí .

En pocas palabras: debe definir sus valores predeterminados en el userForm de usuario.

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

Entonces necesitas escuchar el cambio potencial.

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

El ejemplo en Code Sandbox permite intercambiar entre dos usuarios y hacer que el formulario cambie sus valores.

over 3 years ago · Santiago Trujillo Report

0

Encontré otra manera fácil, utilicé la API de reset de useForm

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

Después de llamar a la API y obtener los datos de respuesta, llame al reset con nuevos apiData, asegúrese de que las claves de apiData sean las mismas que las claves de entrada (atributo de nombre):

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

Los valores predeterminados del formulario se almacenan en caché y, por lo tanto, una vez que obtiene los datos de la API, restablecemos el estado del formulario con nuevos datos.

over 3 years ago · Santiago Trujillo Report

0

Esto funciona para objetos anidados (estoy usando la versión 6.15.1)

 useEffect(() => { for (const [key, value] of Object.entries(data)) { setValue(key, value, { shouldValidate: true, shouldDirty: true }) } }, [data])
over 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error