Tener este modal que tiene algunas entradas que se validan con forma de gancho de reacción:
import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { Modal, Footer, Input, Textarea } from '../ui-components'; import { usePostData } from '../lib/hooks/use-post-data'; const schema = yup.object().shape({ input: yup.string(), description: yup.string() }); export interface MyModalProps { open: boolean; toggle: () => void; } export function MyModal({ open, toggle }: MyModalProps) { const emptyInput = { input: '', description: '' }; const { handleSubmit, reset, register } = useForm({ resolver: yupResolver(schema) }); const { mutate: postDta } = usePostData(); const onAddSubmit = (data) => { postSignalMapping(data); toggle(); reset(emptyInput); }; const onCancelModal = () => { toggle(); reset(emptyInput); }; return ( <Modal title='my modal' open={open} onClose={toggle} footer={<Footer onSubmit={handleSubmit(onAddSubmit)} onCancel={onCancelModal} />} > <div> <Input inputId='input' label='input' {...register('input')} /> <Textarea label='description' {...register('description')} /> </div> </Modal> ); } export default MyModal; Funciona bastante bien además de la parte de reset que debe hacerse cuando el modal está cerrado, a veces tiene algunos errores.
¿Hay alguna manera de hacer que se vuelva a renderizar después de que se cierre el modal?
Parece que también debe proporcionar valores predeterminados para el useForm .
Deberá pasar useForm defaultValues restablecer el valor de los componentes del Controller .
Al invocar reset({ value }) sin proporcionar useForm defaultValues la biblioteca reemplazará los valores defaultValues con un objeto de value de clon superficial que proporcione (no deepClone) .
// ❌ avoid the following with deep nested default values const defaultValues = { object: { deepNest: { file: new File() } } }; useForm({ defaultValues }); reset(defaultValues); // share the same reference // ✅ it's safer with the following, as we only doing shallow clone with defaultValues useForm({ deepNest: { file: new File() } }); reset({ deepNest: { file: new File() } }); Use la sintaxis extendida para crear copias superficiales del objeto de valores predeterminados de emptyInput .
export function MyModal({ open, toggle }: MyModalProps) { const emptyInput = { input: '', description: '' }; const { handleSubmit, reset, register } = useForm({ defaultValues: { ...emptyInput }, resolver: yupResolver(schema) }); ... const onAddSubmit = (data) => { postSignalMapping(data); toggle(); reset({ ...emptyInput }); }; const onCancelModal = () => { toggle(); reset({ ...emptyInput }); }; ... }