← 一覧へ
コードの書き間違い出る場所:ブラウザの画面・開発者ツールたまに出る

入力欄の管理の仕方が途中で変わった(React)

Warning: A component is changing an uncontrolled input to be controlled.

ひとことで言うと

注意のお知らせで、「入力欄の値が、最初は空っぽ(undefined)で、あとから値が入りました」という意味です。

よくある原因

  1. useState() の最初の値を入れていない(useState("") が正しい)
  2. データの読み込み前は undefined になっている

自分で確かめること

たいていは、こうすると直ります

useState("") のように最初の値を入れるか、value={name ?? ""} と書きます。

AIへの伝え方

下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。

次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。

【エラー】
Warning: A component is changing an uncontrolled input to be controlled.

【やったこと】
(ここに、エラーが出る前にしたことを書く。例:npm run dev を実行した)

【参考】
このエラーは「入力欄の管理の仕方が途中で変わった(React)」というもので、よくある原因は次のとおりです。
・`useState()` の最初の値を入れていない(`useState("")` が正しい)
・データの読み込み前は undefined になっている

どれに当てはまるかを確かめる方法も教えてください。