即使一切都受到控制，也会出现不受控制的输入错误

Posted 2023-03-23

【中文标题】即使一切都受到控制，也会出现不受控制的输入错误

【英文标题】：Getting uncontrolled input error even though everything is controlled

【发布时间】：2020-02-14 21:28:16

【问题描述】：

我需要你的帮助，我正在尝试使用 react-strap 中的表单，但由于某种原因，我收到了这个错误：

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

这是我的代码。 一切都被控制了，但我仍然得到错误，有人能发现我的错误吗？

const LoginForm = () => 
  const [formData, setFormData] = useState(
    email: " ",
    password: " "
  );
  const onChange = e => 
    setFormData(
      [e.target.name]: e.target.value
    );
  ;
  const onSubmit = e => 
    e.preventDefault();
    console.log("email password are", formData.email, formData.password);
    loginUser(formData.email, formData.password);
  ;
  return (
    <Form onSubmit=onSubmit>
      <FormGroup>
        <h1>Login</h1>
      </FormGroup>
      <FormGroup>
        <Label for="Email">Email</Label>
        <Input
          type="email"
          name="email"
          id="Email"
          placeholder="[e-mail]"
          onChange=onChange
          value=formData.email
        />
      </FormGroup>
      <FormGroup>
        <Label for="Password">Password</Label>
        <Input
          type="password"
          name="password"
          id="Password"
          placeholder="password"
          onChange=onChange
          value=formData.password
        />
      </FormGroup>
      <Button>Submit</Button>
    </Form>
  );
;

【参考方案1】：

好的，我发现了错误，我没有传播最后一个答案，所以通过输入密码我覆盖了我的电子邮件，正确的更改应该是这样的：

const onChange = e => 
    setFormData( ...formData, [e.target.name]: e.target.value );
  ;