使用 .map 同时迭代两个不同的数组答案

【问题标题】：Using .map to iterate on two different arrays at the same time使用 .map 同时迭代两个不同的数组
【发布时间】：2020-02-09 23:34:08
【问题描述】：

我有两个长度相同的数组，我想对它们进行迭代并将可迭代对象发送到一个新组件。

第一个数组是haircutsLeft，第二个是haircutsRight。按照这个问题：Using map to iterate through two arrays，我尝试了他们的建议，但收效甚微。

第一次尝试

export default function VotingComponent({haircutsLeft, haircutsRight}) {

    return(
        <Grid
            {haircutsLeft.map((haircutLeft, idx) =>
                <DisappearingComponent haircutLeft={haircutLeft} haircutsRight={haircutsRight[idx]} idx={idx}/>
            )}
        </Grid>
    )

}

它不会将haircutsRight={haircutsRightLoop[idx]} 传递给DisappearingComponent，因为如果我在控制台登录DisappearingComponent，我会得到undefined

第二次尝试

export default function VotingComponent({haircutsLeft, haircutsRight}) {

     haircutsLeft.map((haircutLeft, index) => {
         const haircutRight = haircutsRight[index];
         return (
             <div>
            <DisappearingComponent haircutLeft={haircutLeft} haircutsRight={haircutRight}/>

             </div>    
         );
     });
}

我收到VotingComponent(...): Nothing was returned from render.

第三次尝试 - 按照评论的建议

export default function VotingComponent({haircutsLeft, haircutsRight}) {

    return haircutsLeft.map((haircutLeft, index) => {
        console.log(index)
        const haircutRight = haircutsRight[index];
        console.log(haircutRight)
        return (
            <div>
                <DisappearingComponent haircutLeft={haircutLeft} haircutsRight={haircutRight}/>
            </div>
        );
    });
}

我可以正确地控制台记录index，但haircutRight 给了我undefined

这是我要向其发送道具的组件

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

}

【问题讨论】：

您的第三次尝试应该会奏效。你的haircutsRight 里面有数据吗？另外，它的长度和haircutsLeft一样吗？正如我在回答中提到的那样，这只有在您的第二个数组与第一个数组大小相同时才有效。
是的，两者的长度相同。在祖父组件中，我有一个长度为 16 的 haircuts 数组，并将其分成两半。然而，既然你让我注意到了，haircutsRight 是空的，即使在祖父组件中包含正确的值。我会试着看看我做错了什么。谢谢
很高兴我能帮助您解决这个问题。祝你好运！

标签： reactjs

【解决方案1】：

在您的第一次尝试中，我在任何地方都找不到您的haircutsRightLoop。我认为您应该在那里使用haircutsRight。如果您的 haircutsLeft 和 haircutsRight 数组长度相同，那么您的代码应该可以解决问题。

在您的第二次尝试中，您还应该返回由.map() 返回的新数组：

export default function VotingComponent({haircutsLeft, haircutsRight}) {

     return haircutsLeft.map((haircutLeft, index) => {
         const haircutRight = haircutsRight[index];
         return (
             <div>
             <LeftCard haircutLeft={haircutLeft}/>
             <RightCard haircutRight={haircutRight} />
             </div>    
         );
     });
}

【讨论】：

（并添加渲染方法）
OP 似乎适用于功能组件。 render 方法是类组件的一部分。
是的，对不起。在第一次尝试中我做了haircutsRight，我纠正了它。然而，没有成功。我正在使用Hooks
（并且两个组件参数都需要称为“道具”，它们目前是匿名的）
是的，我在第三次尝试您的建议时更新了我的问题合并