La méthode setValue de react-hook-form ne fonctionne pas si l'entrée est dans la boîte de dialogue de l'interface utilisateur du matériau

Question

J'ai essayé d'utiliser react-hook-form pour valider les entrées. Mais j'ai trouvé que si l'entrée est placée dans le composant de dialogue de l'interface utilisateur Material, setValue de react-hook-form ne fonctionne pas comme prévu, mais cela fonctionne lorsque je supprime le composant Dialog. Je suppose que la raison en est que la valeur est définie avant le montage du composant, mais ne peut toujours pas trouver la solution.

La valeur sera récupérée sur le serveur, donc je ne peux pas utiliser defaultValues de react-hook-form.

https://codesandbox.io/s/react-hook-form-material-ui-twbbw

J'ai essayé d'utiliser useState pour contrôler la valeur d'entrée, mais il y a un autre problème. Lorsque vous effacez l'entrée, cliquez sur le bouton Soumettre et un message d'erreur s'affiche, la première lettre que je saisis ne sera pas affichée.

https://codesandbox.io/s/react-hook-form-material-ui-ve2en

Answer 1

Étant donné que setValue a ses particularités, comme expliqué ci-dessus par @ Domino987, une alternative pour les scénarios où un formulaire est rempli de données extraites d'un serveur est:

• utilisez useState pour conserver la valeur récupérée;
• Controllers defaultValue pour définir la valeur et;
• n formulaire rendu conditionnellement.

Un pseudo exemple:

const [state, setState] = useState({name: '', requested: false});

useEffect(() => {
    HTTP_Service.getName().then(name => {
      setCompanyInfo({name, requested: true})
    });

}, []);

const {name, requested} = state

return ({requested ? <Text>Loading...</Text> : <View>
    <Controller
        as={
        <Input               
          label={t('name')}
          placeholder={t('name')}
        />
        }
        defaultValue={name}
        control={control}
        name="name"
        onChange={args => args[0].nativeEvent.text}
    />
</View>});