Карта 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>

    );
}

Проблема состоит в том, что я хотел бы сделать цикл элемента альбома с изображением и названием, данные альбома содержат названия альбомов, в то время как альбомное изображение содержит первое изображениеальбом, но я не могу сделать карту под альбомом thumbnail.map.

Я хотел бы сделать цикл в div для отображения альбомов с деталями, поступающими из двух массивов объектов.Но это кажется невозможным.

Answer 1

Я сделал благодаря вашему ответу.Благодаря 2-му параметру, что я смог это сделать!

return (
            <div class="content2">
            {albumthumbnail.map((data, index) => (
                <div class="albumcontainer">
                    <div class="albumitem">
                        <img src={data.thumbnailUrl}></img>
                        <button class="description" onclick="showDetail()">{albumdata[index].title}</button>
                    </div>  
               </div> 
            ))}
            </div>

        );

Answer 2

Функция, которую вы передаете в карту, на самом деле получает более одного передаваемого ей параметра.Второй параметр - это индекс.Таким образом, вы можете использовать это, чтобы получить соответствующее значение из вашего другого массива.

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

Я предполагаю, что два массива имеют одинаковую длину;если это не так, вам понадобятся дополнительные меры предосторожности.