【React】useFieldArrayの重複データ削除方法ご紹介。

TypeScript

2022.06.03

今回の記事はReactのフォーム管理で便利なReactHookFormのuseFieldArrayの重複データを削除する方法に関してご紹介します。ReactHookFormは便利ですので、是非覚えておきましょう。参考にしていただければ幸いです。

ReactでuseFieldArrayの重複データ削除

下記図のようなセレクトボックスでひたすら値を追加していくサンプルで考えてみます。

仮に「111111」が選択し、追加されている場合は追加ボタンを押しても追加しないような重複削除になります。

コードは下記です。

// セレクトボックス型
export type Select= {
  value: string,
  text: string,
};

フォーム型
export type SampleForm= {
  sample: Select[];
};

// フォームの初期値
const default = {
  sample:[]
}

// ReactHookFormの本体
const formMethod = useForm<SampleForm>({
    defaultValues: default ,
})

const selectArray = useFieldArray({
    control: formMethod.control,
    name: 'sample',
});

  // セレクトボックス追加
  const onAddSelect = formMethod.handleSubmit(
    (data: SampleForm) => {
      if (
        selectArray.fields.some((x) => x.value === data.value ) === false 
        && data.value != ''
      ) {
        const addParam: SelectOption = {
          value: data.value ,
          text: data.Text,
        };
        selectArray.append(addParam);
      }
    },
  );

今回のメインとなる箇所は下記です。

selectArray.fields.some((x) => x.value === data.value ) === false

追加されたセレクトボックスの項目と同じ値が配列内にあるかを「some関数」を用いて探しています。ある場合trueが返ります。

では短いですが、今回の記事は以上です。ほかにもtypescriptやReact関連の記事を多数記載しているので気になる方はサイト内見ていってください。