React中如何实现子组件向父组件传递数据？

问题分析 #

你看到的[object Object]是因为字符串拼接对象时，JS会默认把对象转为[object Object]字符串，直接打印对象就能看到具体内容。另外当前代码没实现文本框输入到父组件状态的绑定，还存在组件根元素不符合React要求（return只能有一个根节点）的问题。

修正步骤 #

1. 正确打印对象：
   别用字符串拼接对象，直接把对象作为console.log的参数，或者用JSON.stringify转成字符串查看：

   const test = () => {
     console.log('test detects', data, 'and', setData);
     // 或者转成字符串：
     // console.log('test detects ' + JSON.stringify(data) + ' and ' + typeof setData);
   }
   

2. 绑定文本框与父组件状态：
   子组件的TextField要从data对象里取值，同时添加onChange事件更新父组件的data状态：

   <TextField 
     id="outline-basic" 
     label="data1"
     name="data1"
     value={data.data1}
     onChange={(e) => setData(prev => ({...prev, data1: e.target.value}))}
   />
   

   这里用函数式更新setData(prev => ...)，确保基于最新的状态修改数据。

3. 修复组件根元素：
   React组件的return必须只有一个根元素，用<div>或者<>（Fragment）把所有元素包裹起来。

完整修正代码 #

父组件

import { useState } from 'react';
import ChildComponent from './ChildComponent';

function Main() {
  const [data, setData] = useState({
    data1:'',
    data2:'',
    data3:'',
    data4:'',
  });

  return (
    <div>
      <div>Always here Content</div>
      <ChildComponent data={data} setData={setData} />
    </div>
  );
}

export default Main;

子组件

function ChildComponent({ data, setData }){
  const test = () => {
    console.log('test detects', data, 'and', setData);
  };

  return (
    <div>
      <div>Some Rotating Content</div>
      <div>
        <TextField 
          id="outline-basic" 
          label="data1"
          name="data1"
          value={data.data1}
          onChange={(e) => setData(prev => ({...prev, data1: e.target.value}))}
        />
        <TextField 
          id="outline-basic" 
          label="data2"
          name="data2"
          value={data.data2}
          onChange={(e) => setData(prev => ({...prev, data2: e.target.value}))}
        />
      </div>
      <button onClick={test}>Submit</button>
    </div>
  );
}

export default ChildComponent;

关键说明 #

• 函数式更新setData(prev => ...)：当新状态依赖旧状态时，这种方式能确保拿到最新的状态值，避免异步更新导致的错误。
• 组件命名规范：React组件建议用大驼峰命名，所以childComponent改为ChildComponent更符合行业习惯。

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