Apabila menggunakan react-hook-form dengan suis MUI, suis tidak menunjukkan nilai awal pada pemuatan halaman walaupun nilai ditetapkan kepada benar. Walau bagaimanapun, ini nampaknya merupakan isu paparan, kerana menyerahkan borang tanpa menyentuh butang mengembalikan true dengan suis ditakrifkan sebagai benar. Selain itu, mengklik butang ini (ditunjukkan sebagai palsu) sekali tidak akan memberi kesan (ia masih kekal di sebelah kiri), dan klik kedua sebenarnya akan menogolnya semula.

Gunakan cangkuk untuk menetapkan nilai awal (digunakan untuk semua jenis medan lain):

useEffect(() => {
  if (userProfile) {
    setValue('firstname', userProfile.firstname);
    setValue('lastname', userProfile.lastname);
    setValue('show_profile', userProfile.show_profile || false);
  }
}, [userProfile]);

Suis dilaksanakan seperti berikut:

<FormControlLabel
    control={<Switch {...register('show_profile')} />}
    label="Profil öffentlich (beinhaltet Vor- und Nachname)"
/>

Ini pula merupakan komponen kotak semak yang berfungsi sepenuhnya:

<FormControlLabel
    control={
      <Checkbox
        {...register('steuerbescheinigung')}
        name="steuerbescheinigung"
      />
    }
    label="Steuerbescheinigung benötigt?"
  />

Bagaimana untuk menggunakan react-hook-form dalam suis MUI dan tetapkan nilai awal?