浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】「`value` prop on `input` should not be null」警告が発生する

よく読めばわかるエラーでしたが、念のためにまとめます。
React の Material UI ライブラリを使用して開発している Web ページを開いた時に発生した警告です。

メッセージの全文はこちら。

`value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

「`input`の`value`propはnullであってはなりません。 空の文字列を使用してコンポーネントをクリアするか、制御されていないコンポーネントの場合は「未定義」を使用することを検討してください。」とのことです。

 

参考にさせていただいた記事はこちら。

【React】 `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.の対処法 – Qiita
https://qiita.com/GalaxyNeko/items/b4dd4b519ee1d0ead969

上記の記事によると、ページにある input 要素の valuenull が代入されている、または未定義だから、代わりに空文字を入れるようにしてください、とのことです。
実際、私のコードにそのような状況になっている箇所があり、そちらを修正したら警告が表示されなくなりました。

サンプルコードは下記のとおりです。
なお、必要なところのみ抜粋しているので、他のオプションは適宜追加してください。

import TextField from '@mui/material/TextField';

<TextField
  label="ラベル"
  value={this.state.inputValue ?? ''}
  onChange={e => this.setState({ inputValue: e.target.value })}
  variant="outlined" />

ポイントは 5行目です。
value={this.state.inputValue ?? ''} と指定すると、this.state.inputValue の値が存在しなかった場合、代わりにから文字列が代入されます。

どちらかというと、発生理由を理解するよりもどこで発生しているのかを探す方が大変だった気がします。

 

以上、React プロジェクトで発生した「`value` prop on `input` should not be null」警告の対処方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)