React Hook FormのTips

react-hook-formに get という関数が付属しており、これでネストしたオブジェクトや配列から以下のようにパスを文字列で指定して値を取り出せる。なおlodashやjustにも同様のものが存在する。

import { get } from 'react-hook-form';

get({ hoge: [{ fuga: ['piyo'] }] }, 'hoge.0.fuga') === 'piyo';

例えば以下のようなスキーマのフォームにおいてsetErrorでエラーをセットする際、 todos.0やinvalidTodoErrorのようなパスにエラーをセットしてしまうとSubmitできなくなる。

type TodoFormValue = {
  todos: {
    title: string,
    error?: any
  }[],
  invalidTodoError?: any
}

なぜならuseFormのmodeで指定したバリデーションのタイミングで、バリデーションが走る直前に既存のエラーが一旦取り除かれるが、トップレベルのパスまたはオブジェクトのパスにセットされたエラーは取り除かれず、バリデーションも走らなくなる。

これを回避するには、todos.0.errorのようなオブジェクトのキーのパスにエラーをセットするか、以下のようにSubmitの直前でclearErrorsを用いて明示的にエラーを取り除く。

const onSubmit = (e) => {
  clearErrors("invalidTodoError");
  handleSubmit(onSubmit)(e);
}