使用React Hooks时表单输入无法更新，formData出现异常键值

你的formData出现{username: "", password: "", "": "a", undefined: undefined}的异常结构，完全来自组件props透传的遗漏，逐点对应逻辑拆解：

• 核心状态更新逻辑缺依赖：你的handleChange是通过event.currentTarget.name作为计算属性键，来同步更新formData的。但父组件调用两个FormInput时，没有给组件传入和状态键匹配的name属性。
  按照DOM规范，未显式设置name的input元素，读取input.name会返回空字符串""。所以你每输入一个字符，就会往formData里新增一个空字符串作为键的属性，存储当前输入的内容，也就是你看到的"": "a"。
• 可选链的边缘场景触发：你的handleChange里用了event.currentTarget?.name的可选链写法，当事件触发瞬间，input的DOM属性还未完全绑定、或是事件冒泡的异步执行时机下currentTarget短暂处于未挂载状态时，可选链会返回undefined作为计算属性键，最终就在formData里留下了undefined: undefined的异常键。

另外你现在的FormInput组件还有个可访问性的小问题：label标签的htmlFor={label}直接拿label文本当关联id值，但input本身没有设置对应id，导致label和输入框没有关联，点击label没法聚焦输入框，这个问题可以顺带修复。

只需要在调用FormInput的时候，补全缺失的name属性和对应关联的id即可：

// 用户名输入框
<FormInput
  label="User name"
  name="username" // 新增：补全name属性，匹配handleChange的取值逻辑
  id="username" // 新增：补全和htmlFor匹配的id，关联label和输入框
  placeholder="Enter your username"
  type="text"
  value={formData.username}
  onChange={handleChange}
/>

// 密码输入框
<FormInput
  label="Password"
  name="password" // 新增：补全name属性
  id="password" // 新增：补全关联id
  placeholder="Enter your password"
  type="password"
  value={formData.password}
  onChange={handleChange}
/>

修复完成后，输入内容时handleChange就能正确读取到username/password作为更新键，formData会按照预期正常更新，不会再出现空字符串、undefined作为键的异常结构。

补充说明：你的handleSubmit里直接从form的DOM元素取值是可以正常运行的，但既然已经维护了formData状态，提交时也可以直接使用formData里的值，不需要再从DOM读取，减少不必要的类型断言。

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