我无法更改输入中的值

Question

部分项目如下：

...
const INITIAL_STATE = {
  email: '',
  password: '',
  error: null
}

const SignInPage = () => {
  return(
    <div>
      <h2>Sign In</h2>
      <SignInForm/>
      <SignUpLink/>
    </div>
  )
}

const SignInFormBase = props => {
  const[init,setInit] = useState(INITIAL_STATE);
  const onSubmit = () => {

  }
  const onChange = (event) => {
    setInit({
      [event.target.name]: event.target.value
    })    
  }
  const isInvalid = init.password === '' || init.email === '';
  return(
    <form onSubmit={onSubmit}>
      <input
        name='email'
        value={init.email}
        onChange={onChange}
        type='text'
        placeholder='Email Address'
      />
      <input
        ...
      />
      <button disabled={isInvalid} type='submit'>Sign In</button>
      {init.error && <p>{init.error.message}</p>}
    </form>
  )
}

const SignInForm = compose(
  withRouter,
  withFirebase
)(SignInFormBase)
export default SignInPage;
export {SignInForm}

问题是：当我用 onChange function 中的 setInit 替换 init 中的值时，出现以下错误。

警告：组件正在将文本类型的受控输入更改为不受控制。 输入元素不应从受控切换到不受控（反之亦然）。 决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

注意：我在密码部分有同样的问题

Answer 1

您剥离了部分代码，但我认为您没有阅读足够好的 React hooks 文档。 通过使用钩子，您将无法替换之前合并值的setState 。 因此，当你打电话

setInit({
   [event.target.name]: event.target.value
})

您将用新的 object 替换整个init变量，因此其他字段将指向未定义的值，并且反应会将组件更改为不受控制，然后在您输入值时再次变为受控。 如果要在 state 中维护 object，则需要自己进行合并。 最简单的方法是使用 object 传播为

  setInit({
    ...init, // <- spread old state
    [event.target.name]: event.target.value
  })

使用此代码，旧 state 将保留在输入之间。 我还建议您不要从字段名称推断 state 属性，因为稍后您可以轻松引入错误，您可以创建 curried 全局 onChange 为

const onChange = (field) => (event) => {
  setInit({
   ...init,
   [field]: event.target.value
  })
}

return (
  <input onChange={onChange('name')} />
)

Answer 2

那是因为您的初始 state 值是undefined 。 如果将其更改为const[init,setInit] = useState(""); 警告将消失。