適当にもほどがありますが、例えば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を使い始めたころによく出ていたエラーなので、ひょっとしたら同じエラーが出て首をひねっている方もいるかと思ったのでシェアします。