React父组件API状态数据传递至子组件映射渲染问题求助

我是React新手，每次以为理解了state就会遇到问题，此次便是其中之一。我有一个作为表单的父组件，包含一个select子组件。父组件表单调用API并更新state对象growerSelect，尝试将该数据传递给子组件，通过map函数处理以填充select选项。目标是复用子组件，因此传入所需属性使其动态化，包括每个option用到的key和显示值。但传递state数据、指定key和值时出现错误：Uncaught Error: Objects are not valid as a React child，并列出API返回的JSON键值对。

父组件代码 #

<SelectComponent
  selectedValue={growerValue}
  setSelectedValue={setGrowerValue}
  labelName="labelGrowers"
  registerName="Grower"
  title="Growers"
  dataArray={growerSelect}
  dataKey="companyid"
  dataField="name"
/>

子组件代码（报错版本） #

import { useFormContext } from "react-hook-form";
import React, { useState } from "react";

export default function SelectComponent({
  selectedValue,
  setSelectedValue,
  labelName,
  registerName,
  title,
  dataArray,
  dataKey,
  dataField,
}) {
  const { register } = useFormContext();

  return (
    <div className="form-group">
      <label htmlFor={labelName} className="form-label mt-4">
        {title}
      </label>

      <select
        {...register(registerName, { required: true })}
        defaultValue={selectedValue}
        onChange={(e) => setSelectedValue(e.target.value)}
        className="form-select"
      >
        {/* <option>Please Select a Grower</option> */}
        {dataArray.map((data) => (
          <option key={data.dataKey} value={data.dataField}>
            {data}.{dataField}
          </option>
        ))}
      </select>
    </div>
  );
}

错误原因 #

1. 动态属性读取错误：dataKey和dataField是你传入的字符串参数（比如"companyid"），直接用点语法data.dataKey会去读取data对象里名为dataKey的属性，而不是你实际需要的companyid或name属性。
2. 直接渲染对象：{data}.{dataField}里的{data}是把整个API返回的对象直接传给React渲染，React不支持渲染对象类型的子元素，这就是报错的直接触发点。

修复方法 #

修改子组件中map循环生成option的逻辑，使用方括号语法读取动态属性：

修复后的子组件代码 #

import { useFormContext } from "react-hook-form";
import React from "react"; // 移除未使用的useState

export default function SelectComponent({
  selectedValue,
  setSelectedValue,
  labelName,
  registerName,
  title,
  dataArray,
  dataKey,
  dataField,
}) {
  const { register } = useFormContext();

  return (
    <div className="form-group">
      <label htmlFor={labelName} className="form-label mt-4">
        {title}
      </label>

      <select
        {...register(registerName, { required: true })}
        defaultValue={selectedValue}
        onChange={(e) => setSelectedValue(e.target.value)}
        className="form-select"
      >
        {/* 添加默认提示选项，提升用户体验 */}
        <option value="">请选择{title}</option>
        {dataArray.map((item) => (
          // 用方括号读取动态属性，key和value用dataKey对应的值，显示文本用dataField对应的值
          <option key={item[dataKey]} value={item[dataKey]}>
            {item[dataField]}
          </option>
        ))}
      </select>
    </div>
  );
}

原理说明 #

结合你的VBA和HTML背景，用你熟悉的逻辑类比：

1. 动态属性读取：JS里的obj[variable]和VBA的CallByName(obj, variable, vbGet)逻辑一致，都是根据变量名动态获取对象属性值，适合你这种需要复用组件、动态指定属性的场景。
2. React渲染规则：就像HTML里只能写文本或标签，React也只能渲染原始数据类型（字符串、数字等）或React元素，不能直接丢一个对象进去，否则会触发类型错误。
3. key的作用：React列表渲染要求每个元素有唯一key，这里用item[dataKey]（比如唯一的companyid）作为key，相当于给每个option加了唯一标识，帮助React高效更新列表，避免不必要的重渲染。

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