React中handleValidation函数无法访问useState值，password显示undefined求助

你的问题出在handleChange函数更新状态的写法错误，导致values的结构被破坏，所以在handleValidation里解构出的password等字段都是undefined。

错误原因 #

原代码中setValues({ values,[event.target.name]: event.target.value });这一行，错误地把整个values对象作为新状态里的一个键名为values的属性，最终你的状态结构会变成：

{
  values: { username: "", email: "", ... },
  password: "你输入的密码" // 其他输入字段同理
}

这种情况下，直接解构values.password自然会拿到undefined。

修正代码 #

把handleChange函数改成以下写法，使用展开运算符保留原状态的所有字段，再更新当前输入的目标字段：

// Handling change
const handleChange = (event) => {
  setValues({ 
    ...values, // 展开原状态的所有属性，保留已有字段
    [event.target.name]: event.target.value // 覆盖当前输入的字段
  });
};

额外优化提示 #

• 用户名验证的提示文案是"Username should be greater than 3 characters"，但代码判断的是username === ""，建议改成username.length <= 3，让逻辑和提示匹配。
• 确保表单元素的name属性和values里的字段名完全一致（比如<input name="password" />），这样handleChange才能正确匹配对应字段。

内容的提问来源于stack exchange，提问作者Siddhesh Jagdale