Javascript 如何使用react钩子阻止输入元素从非受控切换到受控，反之亦然？

大家好，我在使用react钩子验证表单时遇到了一些问题。每当我点击submit按钮时，我总是会收到一个错误，上面写着

index.js:1警告：组件正在将电子邮件类型的受控输入更改为非受控输入。输入元件不应从受控切换到非受控（反之亦然）。决定在组件的使用寿命内使用受控或非受控输入元件。

这是我的密码

    const [formData, setFormData] = useState({
  email:'',
  password:'',
  emailError:'',
  passwordError:''
 }) 



 const handleEmailChange = e => setFormData({email: e.target.value})

 const handlePasswordChange = e => setFormData({password: e.target.value})

 //validate
 const validate = () => {
  let inputError = false
  const errors = {
   emailError:'',
   passwordError:''
  }
  if(!formData.email) {
   inputError = true
   errors.emailError = 'Please enter a valid email'
  } 
  else if(!formData.email.match(emailRegex)) 
  {
   inputError = true
   errors.emailError = (
    <span style={{color:'red'}}>Your email address must be valid</span>
   )
  }

  if(formData.password.length < 4){ 
   inputError = true
   errors.passwordError = 'Your password must contain more than 4 characters'
  }

  setFormData({
   ...errors
  })

  return inputError
 }

 const onSubmit = e => {
  e.preventDefault();

  const err = validate();

  if(!err){`
   setFormData(formData)
  }
 }

const[formData，setFormData]=useState({
电子邮件：“”，
密码：“”，
电子邮件错误：“”，
密码错误：“”
}) 
const handleEmailChange=e=>setFormData（{email:e.target.value}）
const handlePasswordChange=e=>setFormData（{密码：e.target.value}）
//证实
常量验证=（）=>{
设inputError=false
常量错误={
电子邮件错误：“”，
密码错误：“”
}
如果（！formData.email）{
输入错误=真
errors.emailError='请输入有效的电子邮件'
} 
如果（！formData.email.match（emailRegex））则为else
{
输入错误=真
errors.emailError=(
您的电子邮件地址必须有效
)
}
如果（formData.password.length<4）{
输入错误=真
errors.passwordError='您的密码必须包含4个以上的字符'
}
setFormData({
…错误
})
返回输入器
}
const onSubmit=e=>{
e、 预防默认值（）；
const err=validate（）；
如果（！err）{`
setFormData（formData）
}
}

我的JSX

   <FormContainer>
   <div className="form-container">
    <form >
     <h1>Sign in</h1>
     <div className="input-container">
      <input className={formData.emailError ? 'input-error input-empty' : 'input-empty'}
       value={formData.email} 
       type="email"
        required
        onChange={e => handleEmailChange(e)}
        />
      <label>Email or Phone Number</label>
      <span style={{color: '#db7302'}}>{formData.emailError}</span>
     </div>
     <div className="input-container">
      <input 
      className={formData.passwordError ? 'input-error input-empty' : 'input-empty'}
       type="password" 
       value={formData.password} 
       required
       onChange={e => handlePasswordChange(e)}
       />
      <label>Password</label>
      <span style={{color: '#db7302'}}>{formData.passwordError}</span>
     </div>
     <div className="input-container">
      <Button href="/" onClick={e => onSubmit(e)} type="submit">Sign in</Button>
     </div>
     <label className="checkbox-container">
      Remember me
     <input type="checkbox" checked />
      <span className="checkmark"></span>
     </label>
     <Link to="/" className="need-help">Need Help?</Link>
     <div className="bottom-form">
      <img src={fbLogo} alt="" />
      <Link to="/" className="login-fb">
       Login with facebook
     </Link>
     <br/>
     <br/>
     <span style={{color:'#999'}}>New to netflix?</span>&nbsp;
     <Link to="/" className="signup-txt">Sign up now</Link>
     </div>
    </form>
   </div>
  </FormContainer>

登录
handleEmailChange（e）}
/>
电子邮件或电话号码
{formData.emailError}
handlePasswordChange（e）}
/>
密码
{formData.passwordError}
onSubmit（e）}type=“submit”>登录
记得我吗
需要帮助吗？
使用facebook登录




netflix新手？
现在就报名吧

当您设置

表单数据

时，您不会包含所有的值，因此与其将

电子邮件

作为空字符串，它将变为

未定义

，如果

输入的值为
未定义
，React将决定该输入不受控制

要防止出现这种情况，请在设置
formData
时包括表单的以前值：

setFormData(formData => ({
  ...formData,
  ...errors
}))

嗨，谢谢你的快速回复。我很感激。但是，在我这样做之后，我得到了一个错误，显示“无法读取长度为undefined的属性”以及“组件正在将密码类型的受控输入更改为不受控制”。在我单击submit按钮之后，密码。这可能是什么原因？再次感谢。您需要更改使用
setFormData
的所有位置，以包括以前的值-
handleEmailChange
，
handlePasswordChange
，等等。。。我在您的代码中没有看到任何数组，因此我不知道
“无法读取未定义长度的属性”
的来源。非常感谢您的输入。