連續卡上的相同圖像

Question

我正在向網頁展示Cards 。 我想要每排3張牌。 我從Firestore提取數據。 我有一個名為userData的collection 。 userData包含以下字段headerImage name和email 。 我正在使用map方法迭代對象。 名稱和電子郵件字段在卡中正確顯示，但行中所有卡的圖像都相同。

我正在使用react，這是從Firestore返回數據的map方法：

render() {

        return (
            <div className='container-fluid d-flex justify-content-center'>
                <div className='row'>
                    {this.state.userData.map(board =>
                    <div className='col-md-4'>
                        <Card  title={board.name} body={board.email} imgsrc={board.headerImage}/>
                    </div>

                )}

                </div>
            </div>
        );
    }

這是Card class （我正在使用bootstrap）。

const Card = props => {
    return (
        <div className='card text-center shadow'>
            <div className='overflow'>
                <div className="embed-responsive embed-responsive-16by9">
                <img src={props.imgsrc} alt='Image 1' className='card-img-top embed-responsive-item' />
                </div>

            </div>
            <div className='card-body text-dark'>
                <h4 className='card-title'>{props.title}</h4>
                <p className='card-text text-secondary'>{props.body}</p>
                <a href='#' className='btn btn-outline-success'>
                    Go Anywhere
                </a>
            </div>
        </div>
    );
};

和css文件..

body {
    background: radial-gradient(#e5e5e5, #ffff, #e5e5e5);
}

.card {
    width: 20rem;
}

.card:hover {
    box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253) !important;
}

.card-body {
    padding: 3rem 0 !important;
}

.card-text {
    font-size: 0.9rem;
    padding: 0.4rem 1.9rem;
}

.container-fluid .row {
    padding-top: 6rem;
}

.overflow {
    overflow: hidden;
}
.card-img-top {
    transform: scale(1);
    transition: transform 0.5s ease;
}

.card-img-top:hover {
    transform: scale(1.8);
}

為什么同一圖像使用相同的圖像填充同一行中的所有卡，而name和email按預期工作。

這是網頁

圖片字段稱為headerImage 。 顯而易見的是檢查行中每個項目中是否有相同的圖像...但我加倍檢查行中的每個項目都有不同的imageHeader 。 但如果我改變Gerard Horgan的圖像，那行中的所有圖像都會發生變化..

Answer 1

您是否嘗試過為卡組件添加密鑰？

{this.state.userData.map((board, index) =>
   <div className='col-md-4'>
      <Card key={index} title={board.name} body={board.email} imgsrc={board.headerImage}/>
   </div>

)}