لدي مشكلة في التعامل مع input في react

Rayden Storm · 25 فبراير 2021

import React, { useState, useEffect } from 'react';

export default function Login() {
  const [name, setName] = useState();
  useEffect(() => {
    console.log(name);
  }, []);

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

يحدث معي هذا الخطا

warning:A component is changing an uncontrolled input of type undefined

Salah Eddin Beriani2 · 25 فبراير 2021

في react هنا نوعين من ال input نوع يتحكم فيه المتصفح ويسمى uncontrolled ونوع تتحكم فيه انت يدويا عن طريق الكود الذي تكتبه وهذا يسمى controlled ولا يمكننا استخدام الحالتين معا وفي حالتك انت تحاول استخدامهم معا حيث انه المكون كان يتوقع منك ان تعطي قيمة اولية لل input لكن عوضا عن ذلك انت تعطيه قيمة ال name وهو undefined في حالتك ويمكنك اصلاح هذا فقط باعطاء قيمة اولية ل name و string فارغ يكفي ليجعلك تتحكم في ال input

import React, { useState, useEffect } from 'react';

export default function Login() {
  const [name, setName] = useState("");
  useEffect(() => {
    console.log(name);
  }, []);

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}