React中如何获取父组件传递的数据？含报错排查

首先，先搞定你遇到的Uncaught ReferenceError: Chid is not defined错误——大概率是拼写时少打了个l，但更核心的问题是：你错误地把Child组件当成数据传给了Field的data属性，Child是组件，不是你需要的数组数据，这完全用错了对象。

接下来我们一步步把整个流程修正正确：

第一步：让Add组件正确接收并传递父组件的data #

你的父组件已经把data通过props传给了Add组件，首先在AddPage.jsx（也就是你的Add组件文件）里，先接收这个data props，再把它传递给内部的AddForm组件：

// AddPage.jsx
import AddForm from './AddForm'; // 假设AddForm是单独文件，或在当前文件内定义

// 接收父组件传来的data
const Add = ({ data }) => {
  return (
    <div>
      {/* 将data传递给AddForm */}
      <AddForm data={data} />
    </div>
  );
};

export default Add;

第二步：修正AddForm组件的问题 #

你的AddForm是函数组件，不能用this.props，要直接通过参数接收props，同时正确把data传给Multiselect对应的Field：

// AddForm.jsx 或在AddPage.jsx内定义
import { Field } from 'redux-form'; // 假设你用redux-form的Field组件

// 函数组件直接通过参数接收props
const AddForm = (props) => {
  // 从props解构出需要的属性
  const { handleSubmit, data } = props;

  // 确保自定义的renderMultiselect能接收并使用传入的data、valueField等属性
  const renderMultiselect = (fieldProps) => {
    const { input, data, valueField, textField, label } = fieldProps;
    return (
      <div>
        <label>{label}</label>
        <select {...input} multiple>
          {data.map(item => (
            <option key={item[valueField]} value={item[valueField]}>
              {item[textField]}
            </option>
          ))}
        </select>
      </div>
    );
  };

  // 定义提交逻辑
  const onSubmit = (values) => {
    console.log('提交的选择结果:', values);
    // 这里可以加接口请求等后续逻辑
  };

  return (
    <div className="form-row">
      <div className="col-md-12">
        <form onSubmit={handleSubmit(onSubmit)}>
          {/* 这里的data要传实际的数组，也就是从props拿到的data */}
          <Field 
            name="colors" 
            component={renderMultiselect} 
            data={data} 
            valueField="id" 
            textField="name" 
            label="Colors" 
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    </div>
  );
};

export default AddForm;

第三步：移除不必要的Child组件 #

你之前定义的Child组件是把data映射成name数组，但Multiselect需要的是包含id和name的完整对象数组（因为你设置了valueField="id"和textField="name"），所以这个Child组件完全没必要，直接用原始的data数组即可。

额外注意点 #

• 确保你的renderMultiselect函数能正确接收data、valueField等属性，并正确渲染下拉选项；
• 如果AddForm和Add组件在同一个文件里，要保证AddForm能通过props拿到data，或者在同一个作用域内直接使用；
• 函数组件里绝对不能用this.props，所有props都是通过参数传递的，直接解构或用props.xxx访问即可。

这样修改后，你就能正确获取父组件传递的data，并在Multiselect中正常使用，同时也解决了那个ReferenceError的问题。

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