React：如何将两个不同数组的数据传入同一个组件？

你的问题核心是现在通过两次map遍历生成了多个Field2Content组件实例，但需求是只保留一个。关键思路是先把两个数组的数据整合到一起，再传递给同一个组件实例，而不是分别遍历数组生成组件。

下面分两种常见场景给出解决方案：

场景1：两个数组是一一对应的（索引匹配，长度相同） #

如果thumbnails和texturasEscolhidas的元素是一一对应的（比如第i个缩略图对应第i个纹理），可以先把对应位置的数据合并成对象数组，再把整个数组传递给单个Field2Content组件：

const Field2 = (props) => {
  // 合并两个数组的对应数据，用可选链避免数组越界报错
  const combinedItems = props.thumbnails.map((thumbnail, index) => ({
    label: thumbnail.label,
    name: props.texturasEscolhidas[index]?.name
  }));

  // 只渲染一个Field2Content，把合并后的所有数据传进去
  return (
    <div className="field2">
      <Field2Content items={combinedItems} />
    </div>
  )
}

然后你需要修改Field2Content组件，让它接收items prop并处理这些数据：

const Field2Content = ({ items }) => {
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <span>标签：{item.label}</span>
          <span>名称：{item.name}</span>
        </div>
      ))}
    </div>
  )
}

场景2：两个数组各只有一个元素，需要合并成单个对象传递 #

如果两个数组都只有一条数据，直接取数组的第一个元素合并后传递给单个组件即可：

const Field2 = (props) => {
  // 取出两个数组的第一个元素（用可选链处理数组为空的情况）
  const firstThumbnail = props.thumbnails[0];
  const firstTextura = props.texturasEscolhidas[0];

  return (
    <div className="field2">
      <Field2Content 
        label={firstThumbnail?.label} 
        name={firstTextura?.name} 
      />
    </div>
  )
}

为什么原来的代码会生成多个组件？ #

你原来的代码中，props.thumbnails.map(...)会为每个缩略图生成一个Field2Content，props.texturasEscolhidas.map(...)又会为每个纹理生成一个，最终组件实例数量是两个数组长度的总和。通过先整合数据再传递，就能只保留一个Field2Content实例。

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