javascript - 映射 2 个对象数组以形成循环

Question

我有这些代码

    import React, { Component } from 'react'
    import './RightContent.css'

    class RightContent extends Component {
    render() {
    const albumdata = this.props.albumdata;
    const albumthumbnail = this.props.albumthumbnail;
    return (

        <div class="content2">
        {albumthumbnail.map(data => (

            <div class="albumcontainer">
                <div class="albumitem">
                    <img src={data.url}></img>
                    <div class="description">{data.title}</div>
                </div>  
           </div>

        ))}
        </div>

    );
}

问题是我想制作一个带有图像和标题的专辑项目循环，albumdata 包含专辑的标题，而 albumthumbnail 包含专辑的第一张图片，但我不能在 albumthumbnail 下面做 map 。 map 。

我想在 div 中创建一个循环，以显示包含来自两个对象数组的详细信息的相册。但这似乎是不可能的。

Answer 1

您传递给 map 的函数实际上得到的不仅仅是传递给它的一个参数。第二个参数是索引。因此，您可以使用它从其他数组中获取相应的值。

albumthumbnail.map((thumbnail, index) => (
  // Do something with thumbnail, and also something with albumdata[index]
))

我假设这两个数组的长度完全相同；如果不是，您将需要更多保护措施。