ReactJS 密码字段警告

Question

在ReactJS中，我在表单中有两个密码字段（password和confpassword）。对应的代码片段如下。

状态变量如下

  const [theUser, setTheUser] = useState(
    {
      firstname: '',
      lastname: '',
      email: '',
      password: '',
      confpassword: '',
    },
  );

UI代码如下

<td>
  <input 
    type="password" 
    maxLength={15}  
    id="password" 
    name="password" 
    value={theUser.password}
    onChange={(e) => setPassword(e.target.value)}
  />
</td>

<td>
  Conf. password
</td>
<td>
  <input 
    type="password" 
    maxLength={15}  
    id="cnfpassword" 
    name="cnfpassword" 
    value={theUser.confpassword}
    onChange={(e) => setConfirmPassword(e.target.value)}
  />
</td>

onChange 函数如下。

  function setConfirmPassword(value) {
    const newUser = {...theUser};
    newUser.confpassword = value;
    setTheUser(newUser);
  }

  function setPassword(value) {
    const newUser = {...theUser};
    newUser.password = value;
    setTheUser(newUser);
  }

所以我对密码和confpassword都有类似的代码。

当我访问该页面时，在 chrome devtools 中，我收到密码字段的警告，如下所示，而 confpassword 字段没有警告。

警告：组件正在将受控输入更改为 不受控制。这可能是由于值从 已定义为未定义，这是不应该发生的。决定使用 受控或不受控输入元件的使用寿命 成分。更多信息：https://reactjs.org/link/control-components

在输入

在td

我的问题：即使我的密码和配置密码都有相同的代码，为什么我只收到密码字段的警告？

Answer 1

您正在直接更新状态，这就是您收到错误的原因，您应该重构代码以使用 setTheUser setter 函数来代替

 function setConfirmPassword(value) {
  setTheUser(prevUser => ({ ...prevUser, confpassword: value }));
}

function setPassword(value) {
  setTheUser(prevUser => ({ ...prevUser, password: value }));
}