使用功能组件创建 React 表单时出错

Question

今天我只是想用功能组件和使用 React 的 useState 钩子创建一个用于登录/注册的表单。但是，我遇到了这个问题。如果有人可以提供帮助，将不胜感激。我试图寻找一个原因，然而，它无济于事。谢谢。

• 只要我在电子邮件字段中提供输入，我就会收到警告。 ''警告：组件正在将未定义类型的受控输入更改为不受控。输入元素不应从受控切换到不受控（反之亦然）。 '' 我不知道我的代码哪里出了问题。

function Login(){
   const [state, setState] = useState({
       email:'',
       password:'',
   })

   const handleChange = e => {
       setState({ [e.target.name]: e.target.value })
   } 

   const handleSubmit = e => {
       e.preventDefault();
       var email = state.email;
       var password = state.password;

       // Firebase requires passwords to be of length 6 or above
       if (password.length < 6) {
           alert("Password must of length 6 or more.");
       } else {
           fire.auth().createUserWithEmailAndPassword(email, password); 
           
           alert("Signed Up Successfully!");
       }
   }

   return(
       <>
       <Navbar/>
       <div>
           <form>
               <input name="email" value={state.email} onChange={handleChange} placeholder="email"></input>
               <input name="password" value={state.password} onChange={handleChange} placeholder="password"></input>
               <button type="submit" onClick={handleSubmit}>Sign Up!</button>
               <button type="submit">Login!</button>
           </form>
       </div>
       </>
   );
}

Answer 1

在useState 中钩住旧状态，并且您传递给setState 函数的对象不会像类组件的setState 那样自动合并。这里你需要确保当你调用setState时所有状态属性连同状态的更新属性都存在。

否则你传递给setState的对象将替换当前状态的对象。

你的状态有两个属性：

{
   email:'',
   password:'',
} 

但是当您更新handleChange 中的状态时，您会省略一个状态属性。与缺失属性关联的输入从受控组件变为不受控组件，因此您会收到错误：

const handleChange = e => {
   setState({ [e.target.name]: e.target.value })
} 

您需要将旧状态与更新后的属性合并：

const handleChange = e => {
   setState({ ...state, [e.target.name]: e.target.value })
} 

或者将状态拆分为两个 useState 调用，每个属性调用一个：

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

然后为每个更新处理程序：

const handleEmailChange = e => {
  setEmail({ [e.target.name]: e.target.value })
}

const handlePasswordChange = e => {
  setPassword({ [e.target.name]: e.target.value })
}

Answer 2

useState 更新整个对象，而不是特定的值，与类组件中的 setState 不同。 所以你需要析构state的现有值并添加更新的值，请在下面找到更新的句柄更改代码：

function Login(){
   const [state, setState] = useState({
       email:'',
       password:'',
   })

   const handleChange = e => {
       setState({ 
                 ...state,
                [e.target.name]: e.target.value })

   } 

   const handleSubmit = e => {
       e.preventDefault();
       var email = state.email;
       var password = state.password;

       // Firebase requires passwords to be of length 6 or above
       if (password.length < 6) {
           alert("Password must of length 6 or more.");
       } else {
           fire.auth().createUserWithEmailAndPassword(email, password); 
           
           alert("Signed Up Successfully!");
       }
   }

   return(
       <>
       <Navbar/>
       <div>
           <form>
               <input name="email" value={state.email} onChange={handleChange} placeholder="email"></input>
               <input name="password" value={state.password} onChange={handleChange} placeholder="password"></input>
               <button type="submit" onClick={handleSubmit}>Sign Up!</button>
               <button type="submit">Login!</button>
           </form>
       </div>
       </>
   );
}