React：将 API 数据从父组件中的状态传递到要映射的子组件

Question

我是 React 新手，每次我认为我理解状态时，我都会遇到问题，这就是其中之一。我有一个父组件，它是一个表单，它有一个子组件，它是一个选择。父表单调用 API 并更新状态对象。我试图将其传递给子组件，然后运行映射函数来获取数据并填充选择选项。目标是重用子组件，因此我尝试通过为其提供所需的所有属性来使其动态化，其中两个将是键和我想要为每个选项显示的值。除了我想要使用的状态数据、键和值之外，我能够传递选择的所有属性。它回来告诉我“未捕获的错误：对象作为 React 子对象无效”，然后列出 API 调用中的 json 键/值对。有人可以解释一下我是如何实现这一目标及其背后的原因吗？我有 VBA 和基本 HTML 背景，我自学了 JS，现在是 React，所以非常感谢您的帮助。

Parent：（注意growerSelect是包含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>
  );
}

Answer 1

非常感谢大家！！将其从 {data}.{dataField} 更改为 {data[dataField]} 就成功了。我假设它起作用的原因是，由于返回的数据是 json key:value 对，它存储在数组中，因此需要 [] 来读取它。这就提出了另一个问题，有没有人对在 React 中何时使用 {}、() 和 [] 有很好的参考？那里有很多如何使用的视频和资源，但我没有找到能够清楚地说明差异或何时使用每个内容的视频和资源。我的理解是，当我想插入一个值或一段JS时，使用{}，()用于表示一个函数，或者当我有多个{}可供使用时，[]是一个数组。任何有助于定义这些功能的提示/资源都会受到欢迎，因为它们对 VBA 来说是陌生的，所以我没有简单的参考。再次感谢您，有一天当我有了更多的了解时，我希望能够帮助其他人，但在那之前，我必须说我很感激 React 社区对一个明显的初学者如此欢迎。