React受控Input无法输入、状态更新异常问题求解

我已定义如下表单状态对象与变更处理函数：

const [mitarbeiter, setMitarbeiter] = useState({
    lastName: "",
    firstName: "",
    quartal: "",
    snummer: "",
    email: "",
    eintrittsdatum: "",
    austrittsdatum: "",
    isAushilfe: false,
});

const handleChange = (event) => {
    const value = event.target.value;
    
    setMitarbeiter({
        ...mitarbeiter,
        [event.target.name]: value
    });
    console.log(event.target.name)
    console.log(mitarbeiter)
};

我编写了如下Input输入框组件，期望输入内容时同步更新状态中的lastName字段值：

<input id="name" type="text" placeholder="Name.." defaultValue="" value={mitarbeiter.lastName} onChange={handleChange}/>

当前出现异常：无法在输入框中输入任何文本，触发状态更新时会新增属性而非修改原有lastName字段值。

一共有两处核心错误：

• 输入框未设置name属性：处理函数是通过event.target.name匹配要更新的状态字段，但当前input只写了id="name"，没有设置name="lastName"，此时event.target.name值为undefined，每次更新都会给状态对象新增一个键为undefined的属性，永远不会修改原有的lastName字段，导致输入框绑定的lastName值始终为空字符串，看起来无法输入内容。
• 受控组件混写defaultValue和value：已经给input绑定了value属性让它成为受控组件，此时defaultValue属性会失效，两者同时书写会触发React的表单状态校验警告，引发渲染异常。

另外更新函数还存在潜在问题：直接展开外层的mitarbeiter变量更新状态，在短时间连续触发变更时可能拿到旧的闭包状态值，导致更新覆盖。如果后续要处理isAushilfe这类复选框字段，直接取event.target.value会拿到字符串"on"而非布尔值，也需要做适配。

首先修正输入框属性，移除无效的defaultValue，添加对应字段的name属性：

<input 
  id="name" 
  type="text" 
  placeholder="Name.." 
  name="lastName"
  value={mitarbeiter.lastName} 
  onChange={handleChange}
/>

然后优化变更处理函数，适配不同表单控件、解决闭包问题：

const handleChange = (event) => {
    const target = event.target;
    // 复选框取checked值，其他输入控件取value
    const value = target.type === 'checkbox' ? target.checked : target.value;
    
    setMitarbeiter(prevState => ({
        ...prevState,
        [target.name]: value
    }));
};

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