javascript - React'te modal kapatıldığında içeriği sıfırlamanın bir yolu

React-hook-form ile doğrulanan bazı girişlere sahip bu modala sahip olmak:

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;

Modal kapatıldığında yapılması gereken reset kısmı dışında oldukça iyi çalışıyor, bazen bazı hataları oluyor.

Modal kapandıktan sonra yeniden render edilmesini sağlamanın bir yolu var mı?

Cevap #1

Görünüşe göre useForm kancasına varsayılan değerleri de sağlamanız gerekiyor.

reset belgeleri

• Controller bileşenlerinin değerini sıfırlamak için useForm'a defaultValues geçirmeniz gerekecek.

• useForm aracılığıyla defaultValues sağlamadan reset({ value }) çağrıldığında, kütüphane, sağladığınız value nesnesinin sığ bir kopyası ile defaultValues yerine geçirecektir (deepClone değil).

   // ❌ 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() } });
  

Boş emptyInput varsayılan değerler nesnesinin sığ kopyalarını oluşturmak için yayma sözdizimini kullanın.

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 });
  };

  ...
}