[英]prevent same Images on cards in a row
我正在向网页展示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的图像,那行中的所有图像都会发生变化..
您是否尝试过为卡组件添加密钥?
{this.state.userData.map((board, index) =>
<div className='col-md-4'>
<Card key={index} title={board.name} body={board.email} imgsrc={board.headerImage}/>
</div>
)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.