如何使用.map同时遍历两个等长数组并向React子组件传参？

我来帮你逐一排查这三个尝试里的问题，然后给出可行的解决方案：

第一个尝试的问题 #

你这里犯了两个容易忽略的小错误：

1. 把map的结果直接放在了Grid组件的属性位置，而不是作为子元素传入，正确写法应该把map的结果放在<Grid>和</Grid>标签之间。
2. 传递给DisappearingComponent的参数名写错了：组件接收的是haircutRight，但你传的是haircutsRight（多了个s），这直接导致组件里拿不到对应的值。

第二个尝试的问题 #

这个问题很明确：你的VotingComponent组件的渲染逻辑里，只执行了haircutsLeft.map()，但没有把map的结果return出去。React组件要求必须返回一个JSX元素或者null，所以才会触发“Nothing was returned from render”的报错。

第三个尝试的问题 #

还是参数名不匹配的老问题！你在VotingComponent里给子组件传的是haircutsRight={haircutRight}，但DisappearingComponent定义里接收的是haircutRight，参数名不一致自然拿不到值。另外也建议你确认下haircutsLeft和haircutsRight的长度是否真的完全一致，如果长度不同，也会出现部分索引下haircutRight为undefined的情况。

正确的实现代码 #

结合以上修正点，这里给出可行的版本：

export default function VotingComponent({haircutsLeft, haircutsRight}) {
  // 先校验两个数组长度一致，避免索引越界报错
  if (haircutsLeft.length !== haircutsRight.length) {
    return <div>两个数组长度不一致，请检查数据！</div>;
  }

  return (
    <Grid>
      {haircutsLeft.map((haircutLeft, index) => {
        const haircutRight = haircutsRight[index];
        // 列表渲染必须加唯一key，推荐用数据的唯一id，没有的话再用索引
        return (
          <DisappearingComponent
            key={index}
            haircutLeft={haircutLeft}
            haircutRight={haircutRight} // 参数名和子组件接收的保持一致
          />
        );
      })}
    </Grid>
  );
}

你的DisappearingComponent代码不需要修改，保持现有逻辑即可：

export default function DisappearingComponent({haircutLeft, haircutRight}) {
  console.log("haircutLeft", haircutLeft)
  console.log("haircutRight", haircutRight)
  return(
    <div>
      <Grid item xs={6}>
        <LeftCard haircutLeft={haircutLeft} />
      </Grid>
      <Grid item xs={6}>
        <RightCard haircutRight={haircutRight}/>
      </Grid>
    </div>
  )
}

额外提醒 #

• 列表渲染时一定要给每个子元素加key属性，这是React高效更新DOM的必要条件，优先用数据自带的唯一标识（比如id），没有的话再用索引。
• 传递props时，一定要确保父组件传的参数名和子组件接收的参数名完全一致，大小写、单复数都不能出错，这是很容易踩的小坑。

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