El método setValue de react-hook-form no funciona si la entrada está en el cuadro de diálogo material ui

Ten en cuenta que en las ciencias informáticas un error casi siempre tiene diversas resoluciones, por lo tanto enseñaremos lo mejor y más óptimo.

Solución:

El problema es con la función de registro. Está registrando el campo de texto con el registro después de llamar a la referencia del campo de texto.

Se llama a useEffect para establecer el nombre en 123 con setValue después del renderizado inicial. Si open es true, el contenido del diálogo se representa después de useEffect. Después de representar el contenido, se llama a la referencia con el registro y el valor predeterminado de Textfield (aquí undefined) se establece como el valor de nombre.

Es por eso que el valor del campo de texto es “” en exhibición. Debe llamar a setValue después de llamar a la devolución de llamada render y ref, para que el valor persista.

Tienes dos opciones para hacerlo:

1. Establezca el valor asíncrono en useEffect con un retraso asíncrono (setTimeout o promesa) después open cambió. Así que si agregas open a la dependencia useEffect array y establezca el valor asíncrono, funciona. Aquí hay un arenero.
2. Establezca el valor predeterminado del campo de texto o agregue el valor predeterminado al gancho con useForm(defaultValues: name: '123).

Para componente controlado externo

Si está usando V3, recomendaría usar react-hook-form-input
https://github.com/react-hook-form/react-hook-form-input

import React from 'react';
import useForm from 'react-hook-form';
import  RHFInput  from 'react-hook-form-input';
import Select from 'react-select';

const options = [
   value: 'chocolate', label: 'Chocolate' ,
   value: 'strawberry', label: 'Strawberry' ,
];

function App() 
  const  handleSubmit, register, setValue, reset  = useForm();

  return (
    
 console.log(data))>
      
        rules= required: true 
        name="reactSelect"
        register=register
        setValue=setValue
      />
      Reset Form
      submit
    
  );

Si está usando V4, recomendaría usar Controller
https://react-hook-form.com/api/#Controller

import React from 'react';
import Select from 'react-select';
import  TextField  from "@material-ui/core";
import  useForm, Controller  from 'react-hook-form';

const options = [
   value: 'chocolate', label: 'Chocolate' ,
   value: 'strawberry', label: 'Strawberry' ,
   value: 'vanilla', label: 'Vanilla' ,
];

function App() 
  const  handleSubmit, control  = useForm();

  return (
    
 console.log(data))>
      
        control=control
        rules= required: true 
        onChange=([selected]) => 
          // React Select return object instead of value for selection
          return  value: selected ;
        
        name="reactSelect"
      />

      
        name="firstName"
        control=control
      />

      submit
    
  );

La idea de envolver su componente controlado y recopilar datos dentro mientras aún aísla se vuelve a renderizar dentro del componente controlado externo.

Si te ha sido de utilidad nuestro artículo, nos gustaría que lo compartas con otros juniors así nos ayudas a difundir nuestra información.

---

---

Utiliza Nuestro Buscador