本文详解 react 中通过回调函数实现子组件向父组件传递数据的核心原理与常见错误，提供完整可运行示例，并重点纠正“多次调用 `senddatahandler` 导致状态覆盖”和“未构造结构化对象”等典型问题。
在 React 应用中，父子组件间的数据流默认是单向的（父 → 子），若需子组件将用户输入、操作结果等反馈给父组件，标准做法是 父组件定义回调函数并作为 prop 传入子组件，子组件在合适时机（如表单提交）触发该回调，并传入结构化的数据对象。
上述代码中存在两个关键问题，直接导致数据无法正确显示：
-
子组件 onTrigger 中对 sendDataHandler 的调用逻辑错误：
原代码两次独立调用 this.props.sendDataHandler(event.target.myname.value) 和 this.props.sendDataHandler(event.target.myemail.value)，每次调用都会覆盖父组件的整个 childDetails 状态对象（因为 setData() 接收的是新对象），最终仅保留最后一次传入的字符串值（如 “bala” 或 “test@example.com”），而非包含 name 和 email 的完整对象。 -
回调函数接收的数据类型与父组件 useState 初始化结构不匹配：
父组件 useState 初始化为 {name: “?”, email: “?”}，因此 sendDataHandler 必须接收一个具有相同键名的普通对象（如 {name: “Bala”, email: “test@example.com”}），而非单独的字符串。
✅ 正确做法是：在子组件表单提交时，一次性收集所有字段，构造符合预期结构的对象，并只调用一次回调函数。修正后的 Child.js 如下：
import React from "react"; class Child extends React.Component {onTrigger = (event) => {event.preventDefault(); // ✅ 正确：一次性构造结构化对象 const formData = {name: event.target.myname.value, email: event.target.myemail.value,}; // ✅ 正确：仅调用一次回调，传入完整对象 this.props.sendDataHandler(formData); }; render() { return ( ); } } export default Child;同时，确保父组件 App.js 中的 sendBackData 回调函数保持不变——它已正确定义为接收对象并更新状态：
const sendBackData = (childDetails) => {setData(childDetails); // ✅ 接收对象，直接用于 setState console.log(childDetails); // 输出 {name: "……", email: "……"} };⚠️ 注意事项：
- 不要使用 event.target.elements.namedItem(“myname”).value 等冗余写法；event.target.myname.value 在表单内命名 时完全可靠。
- 若后续需支持表单校验或动态字段，建议升级为受控组件（即子组件也管理 value 和 onChange），但本例中非受控表单 + onSubmit 提取值是简洁有效的方案。
- 函数组件中可进一步简化为 useCallback 优化回调稳定性，但对基础场景非必需。
总结：子传父通信的本质是“事件驱动的数据委托”。核心原则是——父定义契约（期望接收什么结构），子履行契约（构造并交付该结构）。一次、准确、结构化的数据传递，是避免状态错乱和渲染异常的根本保障。
