入力がマテリアルUIダイアログにある場合、react-hook-formのsetValueメソッドが機能しない

Question

入力を検証するためにreact-hook-formを使用しようとしました。しかし、入力がMaterial UIのダイアログコンポーネントに配置されている場合、react-hook-formのsetValueは期待どおりに機能しませんが、Dialogコンポーネントを削除すると機能します。理由は、コンポーネントがマウントされる前に値が設定されているが、それでも解決策を見つけることができないためだと思います。

値はサーバーから取得されるため、react-hook-formのdefaultValuesは使用できません。

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

入力値を制御するためにuseStateを使用しようとしましたが、別の問題があります。入力をクリアして送信ボタンをクリックすると、エラーメッセージが表示され、キー入力した最初の文字が表示されません。

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

Answer 1

setValueには、@ Domino987で上で説明したように、その特異性があるため、サーバーからフェッチされたデータがフォームに入力されるシナリオの代替策は次のとおりです。

• フェッチした値を保持するには、useStateを使用します。
• Controllers defaultValueで値を設定し、;
• 条件付きでレンダリングされたフォーム。

疑似例：

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