React组件传值异常：仅获取Email，Name显示Undefined

问题根源 #

你的问题出在状态更新时未合并原有状态。React的useState在更新对象类型的状态时，不会自动合并原有属性：

• 当调用setMain({ name: evt.target.value })时，新对象仅包含name属性，原状态中的email会被直接覆盖丢失；
• 同理调用setMain({ email: evt.target.value })时，name属性会被覆盖丢失。
  最终点击按钮时，只有最后一次修改的属性会保留，另一个属性自然显示undefined。

解决方案1：合并原有状态更新 #

修改func1和func2，使用展开运算符...保留原状态的所有属性，仅更新当前需要修改的字段：

function func1(evt) {
    setMain({ ...main, name: evt.target.value });
}
function func2(evt) {
    setMain({ ...main, email: evt.target.value });
}

解决方案2：优化为单个处理函数（更简洁） #

给两个输入框添加name属性，用同一个函数处理所有输入变化，避免重复代码，同时修复email输入框的受控绑定问题：

let [main, setMain] = useState({
    name: "",
    email: ""
});

function handleInputChange(evt) {
    const { name, value } = evt.target;
    setMain({ ...main, [name]: value });
}

return (
    <>
        <div className="mb-3">
            <label className="form-label">Name</label>
            <input 
                type="text" 
                className="form-control" 
                id="exampleFormControlInput1" 
                placeholder="Your name" 
                name="name"
                value={main.name} 
                onChange={handleInputChange} 
            />
        </div>
        <div className="mb-3">
            <label htmlFor="exampleFormControlInput1" className="form-label">Email address</label>
            <input 
                type="email" 
                className="form-control" 
                id="exampleFormControlInput1" 
                placeholder="name@example.com" 
                name="email"
                value={main.email}
                onChange={handleInputChange} 
            />
        </div>
        <button className='btn btn-primary' onClick={() => { props.handler(main) }}>Add</button>
    </>
)

注意：原代码中email输入框未绑定value={main.email}，会导致输入框成为非受控组件，建议补充绑定以保证状态与视图同步。

修改完成后，输入name和email并点击Add按钮，控制台即可正确打印出两个字段的值。

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