为什么没有在反应组件中进行验证

Question

有两个问题

一：尽管我使用处理程序事件，但警告我受控组件无法控制；

其次：js include function 1st time define 2nd-time type error.

我找不到我的问题我使用两次值并用 let 定义它但他们告诉我不要定义第二次为什么包括显示我类型错误

import React,{useState} from 'react'
//component
export default function Form() {
    const [allValues,setAll] = useState({
    name:"",
    email:"",
    pass:"",
    nameerr:"",
    passerr:"",
    emailerr:"",
    
    });
    //valide function
  let valide= ()=>{
      let nameerr;
      let passerr;
      let emailerr;
     if(!allValues.name)
     {
        nameerr='your name invalid';
     }
     if(!allValues.email.includes('@'))
     {
         emailerr='your Email invalid';
     }
     if(!allValues.pass.match(1))
     {
         passerr='your pass invalid';
     }
     if(nameerr||emailerr||passerr)
     {
       let newValue={nameerr,emailerr,passerr};
         setAll(newValue);
        return false;
     }
     return true;
  
  }
  //Onchange handaler
  const  handalChange=(e)=>{
       setAll({...allValues,[e.target.name]:e.target.value});
       
        
    }
 //Onsubmit handaler
 const handalSubmit=(e)=>{
        e.preventDefault();
       
     const NewValide=valide();
       if(NewValide!==false){
      let value={...allValues,  
      nameerr:"",
      passerr:"",
      emailerr:"",}
        setAll(value);
        console.log(value)   
       }
    else{
    valide();
  
   
    }
  }

  return (
    <form onSubmit={handalSubmit} >
               <div>
                  Name: <input
                        placeholder="name" 
                        type="text"
                        name="name"
                        value={allValues.name}
                        onChange={handalChange}
                   />
                   <div>{allValues.nameerr}</div>
                   <div>
                   Email: <input
                        placeholder="email" 
                        type="text"
                        name="email"
                        onChange={handalChange}
                        value={allValues.email}
                   />
                   </div>
                   <div>{allValues.emailerr}</div>
                   <div>
                  password: <input
                        placeholder="password" 
                        type="password"
                        name="pass"
                        onChange={handalChange}
                        value={allValues.pass}
                   />
                   </div>
                   <div>{allValues.passerr}</div>
               </div>
              <input type="submit" value="Submit"/>
         </form  >
  )
}

Answer 1

您在 valide 函数中调用 setAll() 时使用了错误的语法。

尝试调用

setAll({... allValues, nameerr:nameerr ,emailerr: emailerr,passerr: passerr})

通过这样做，您将可以访问 allValues

的其他属性

为什么没有在反应组件中进行验证

why did not worked validation in react component

javascript

reactjs

use-state