React表单开发遇TypeError错误：Cannot read property 'fullName' of undefined 求助

嘿，我一眼就看出问题出在哪了！这个TypeError完全是因为你的自定义UseForm钩子返回值的写法出错，导致组件里解构出来的values是undefined，自然就没法读取fullName属性啦。

你看UseForm钩子里的return语句：

return(
  values, setValues, handleInputChange
)

这是JavaScript的逗号表达式特性——它只会返回最后一个值，也就是handleInputChange。所以当你在Form组件里用对象解构const { values, setValues, handleInputChange } = UseForm(initialvalues);时，values和setValues都会变成undefined，这直接触发了Cannot read property 'fullName' of undefined的错误。

把钩子的返回值改成对象（因为你用的是对象解构），这样解构时能正确匹配到对应属性：

修改UseForm.js的return部分：

return {
  values,
  setValues,
  handleInputChange
};

如果你偏好数组解构的写法，也可以这么改（但要同步调整Form组件的解构方式）：

// UseForm.js里的return
return [values, setValues, handleInputChange];

// Form组件里的解构改成数组形式
const [values, setValues, handleInputChange] = UseForm(initialvalues);

不过更推荐对象写法，属性名明确可读性更高，后续扩展功能也更灵活。

• 你的initialvalues里fullName和email的初始值是空格" "，如果是想设置为空输入状态，建议改成空字符串""，避免用户输入前就有多余空格的问题。

这样修改后，你的Form组件就能正常读取values.fullName和values.email了，报错应该就彻底消失啦！

内容的提问来源于stack exchange，提问作者spotlight world