本文详解 react 中使用 usestate 管理复合状态对象（如 {name: '', email: ''}）时，为何单独调用 setmain({key: value}) 会导致其他字段丢失，并提供安全、可维护的解决方案。
本文详解 react 中使用 usestate 管理复合状态对象（如 {name: '', email: ''}）时，为何单独调用 setmain({key: value}) 会导致其他字段丢失，并提供安全、可维护的解决方案。
在 React 函数组件中，useState 初始化的状态对象是完全替换式更新——每次调用 setMain({...}) 都会用新对象完全覆盖旧对象，而非合并（merge）。因此，在 AddContacts.js 中：
function func1(evt) {
setMain({ name: evt.target.value }); // ❌ 只设 name，email 被重置为 undefined
}
function func2(evt) {
setMain({ email: evt.target.value }); // ❌ 只设 email，name 被重置为 undefined
}当用户输入姓名时，main 被设为 {name: "Alice"}，此时 main.email 已丢失；同理，输入邮箱后 main.name 变为 undefined。最终点击“Add”按钮时，props.handler(main) 接收到的对象只有一个字段有效，另一个为 undefined。
✅ 正确做法是：保留原有状态，仅更新当前字段。推荐使用函数式更新 + 展开运算符（spread syntax）：
function updateField(evt) {
const { name, value } = evt.target; // 利用 input 的 name 属性标识字段
setMain(prev => ({ ...prev, [name]: value }));
}同时，为两个 添加 name 属性并统一绑定该处理函数：
<input
type="text"
className="form-control"
id="exampleFormControlInput1"
placeholder="Your name"
name="name"
value={main.name}
onChange={updateField}
/>
<input
type="email"
className="form-control"
id="exampleFormControlInput2"
placeholder="name@example.com"
name="email"
value={main.email}
onChange={updateField}
/>这样，无论修改哪个字段，updateField 都会基于上一状态 prev 安全合并新值，确保 name 和 email 始终共存。
? 额外建议：
- 为避免 id 冲突，第二个 input 的 id 应改为唯一值（如 exampleFormControlInput2）；
- 邮箱 input 缺少 value={main.email} 绑定，需补全，否则无法受控；
- 生产环境建议配合 useCallback 优化 updateField，防止子组件不必要的重渲染。
通过这一模式，你不仅能解决当前问题，还能为后续扩展更多表单字段（如 phone、address）打下可复用、易维护的基础。
