我是React的新手，每次我认为我理解状态时，我都会遇到问题，这是其中之一。我有一个父组件，它是一个窗体，该窗体有一个子组件，该子组件是一个选择。父窗体调用一个API并更新一个状态对象。我试图将其传递给子组件，然后运行map函数来获取数据并填充选择选项。目标是为了重用子组件，我尝试通过提供它所需的所有属性来使其动态化，其中两个属性是我希望为每个选项显示的键和值。我可以传递选择的所有属性，除了状态数据，键和我想要使用的值。它会返回告诉我“未捕获的错误：Object are not valid as a React child”，然后列出了API调用中的json键/值对。有人能解释一下我是如何做到这一点的吗？以及为什么会这样？我来自于JavaScript和基本HTML的背景，我自学了JS，现在是React，所以任何帮助都很感激。

Parent：（注意growerSelect是state对象，包含API返回数据）

<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>
  );
}

型