web-dev-qa-db-ja.com

反応フックフォーム検証がカスタムフィールド配列で機能しない

カスタムの動的入力フィールド配列でreact-hook-formを使用しています。送信ボタンをクリックしたときに検証が機能しているようですが、エラーメッセージが表示されず、次のように状態を作成しています。

const [formFields, setFormFields] = useState([
{
  height: 45,
  label: "tv",
  placeholder: "555",
  name: "tv",
  maxWidth: 203,
  error: errors.tv,
  value: ""
},
{
  height: 45,
  label: "radio",
  placeholder: "90%",
  name: "radio",
  maxWidth: 126,
  error: errors.radio,
  value: ""
},
{
  height: 45,
  label: "instagram",
  placeholder: "90%",
  name: "instagram",
  maxWidth: 126,
  error: errors.instagram,
  value: ""
}

]）;

そして入力を次のように作成します：

{formFields.map((item, index) => {
      return (
        <div key={index}>
          <TextInput
            name={item.name}
            label={item.label}
            height={item.height}
            placeholder={item.placeholder}
            error={item.error}
            value={item.value}
            inputRef={register({
              required: true
            })}
            onChange={fieldOnChange(index)}
          />
          {item.error && <span>Enter a valide value</span>}
        </div>
      );
    })}

デモ を確認できます

何か助けてください？

javascriptreactjsreact-hook-form
3
webcoder

これは、useStateでformFieldsを使用しているためです。一度だけ実行されます。エラー値、つまり最初の初期値をすでにキャプチャしていることを示します。エラー値の変更を追跡するには、useEffectを使用するか、item.errorの状態を直接エラーに変更する必要があります。

react-hook-formはエラーを検証に使用します。

{errors[item.name] && <span>Enter a valid value</span>}

ここにデモリンクがあります： https://codesandbox.io/s/blue-shape-pv8jf

2
Shubham Verma