将对象数组映射为一个循环

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>

    );
}

问题是，我要用图像和标题来循环相册项目，白蛋白数据包含相册的标题，而白蛋白缩略图保存了专辑的第一个图像，但我不能在albumthumbnail.map下面绘制地图。

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

Answer 1

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

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

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

Answer 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>

        );