【React Hooks】Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value が出たときの対策

適当にもほどがありますが、例えばReact Hooks使ってこんな感じでメールアドレスを入力するフォームを作ったとして。

import { useState } from "react";

function EmailForm() {
  const [email, setEmail] = useState();

  return(
    <form>
      <input type="text" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
    </form>
  )
}

export default EmailForm;

データ入力しようとするとコンソールにこんな感じのエラーが出てきます。

Warning: A 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. More info: https://reactjs.org/link/controlled-components

何がエラーの原因なのかというと「 This is likely caused by the value changing from undefined to a defined value」という一文に答えは書いてあって、useStateの初期値がundefinedになっているからです。

コードをよくよく見るとわかりますがuseState()になっちゃっているので、useState(“”)にすればエラーは解消されます

React Hooksを使い始めたころによく出ていたエラーなので、ひょっとしたら同じエラーが出て首をひねっている方もいるかと思ったのでシェアします。

関連記事

年収アッププログラミング

【MySQL】AUTO_INCREMENTとPRIMARY KEYを同時に設定する方法

CREATE TABLE時にidへAUTO_INCREMENTとPRIMARY KEYを設定するのは定番だと思うのですが、最近はフレームワークを使ってテーブルを作るため、いざSQLを書いて作ろうとすると忘れがち。 今回は自分の名前とメールアドレスを格納するuser...

年収アッププログラミング

【WordPress】SyntaxHighlighter Evolvedが動かないときに確認すべき2つのこと

プログラム関連の記事を書くときに必須と言っていいプラグインである「SyntaxHighlighter Evolved」。当ブログもお世話になっていて、友人周りにもおすすめしています。 ですが、たまに「コードがハイライトされない」という相談を受けることがあります。インストー...