😊

React チェックボックス実装時に uncontrolled input が出た時の対処

2023/10/19に公開2件

チェックボックス実装時に uncontrolled input のwarnig が出た

チェックボックスをクリックすると下記の warnig が出た

component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

対象コード

 <input
    type='checkbox'
    id={companyId}
    checked={isChecked(companyId)}
    onChange={() => onChangeHandler(companyId)}
/>

調査

エラー内容をそのままググる。

上記記事などを参考に、State の値が、nullかundefinedになってしまうタイミングがないように state へ初期値をもたせたりしたがNGだった。

少し抽象化すると state null か undefined が入ることがNGなのではなく、input の value へ falsy な値が入ることが問題なのでは、と仮説が出てきた。

修正

 <input
    type='checkbox'
    id={companyId}
    checked={isChecked(companyId) || false}
    onChange={() => onChangeHandler(companyId)}
/>

falsy な値が入らないようにした。

感想

正直これが正解なのかわからない
input text のエラーに関しての記事は多くあったが、checkbox に関しての記事を見つけることができず苦労した。

Discussion

Honey32

失礼します。

isChecked の中で console.log を呼び出すことで、その瞬間瞬間の返り値を記録することができます。

たぶん { companyId: <id>, checked: undefined } のようにコンソールに表示される瞬間がどこかにあると思います。(とくに初期値のとき)

const isChecked = (companyId: string): boolean => {
  const checked = ...;

  console.log({ companyId, checked });
  return checked;
}

簡単な回避法として、value ?? false と書いてあげると、value が null か undefined のときは、代わりに undefined が結果となる ようになります。

t_hashi

度々フィードバックありがとうございます🙏

フィードバックをいただける環境にいないのでとてもありがたいです！！

恥ずかしながら、 || と ?? の違いも曖昧でしたので、今 mdn を見て理解しました。。。