如何解决即使没有数据,阵列仍在映射
我有一个网站正在从JSON文件映射其显示的产品。 JSON看起来像这样。
"litter3": [
{
"name": "Bates","description": "Cute","image": "./puppies/boo/bates.jpg"
},{
"name": "Blade","description": "This one is fiesty","image": "./puppies/boo/blade.jpg"
},{
"name": "Blair","image": "./puppies/boo/blair.jpg"
},
以此类推。 该页面以以下方式映射:
{litter1.map((litter1) => (
<div className="col-sm-4" key={litter1.name}>
<img
className="homecard frame"
src={litter1.image}
alt={litter1.name}
/>
<h1 className="puppyname">{litter1.name}</h1>
<p className="puppysubtitle">{litter1.description}</p>
</div>
))}
这按预期工作。但是,当JSON数据为空时,就会出现问题。
"litter4": [
{
"name": "","description": "","image": ""
},{
"name": "",
理想情况下,我希望我的客户能够拥有这些已经格式化的代码段,以便她在必要时可以填写,并在不需要时将其留空。
问题是当数据不存在时,页面仍将映射图像。
不提供数据时如何防止这种情况发生?
这可能吗,或者还有另一种方法可以做到这一点?
Link to github repo
预先感谢您的帮助。
解决方法
您可以在制作地图之前简单地对数组进行过滤
litter1.filter(x=>x.title!=='').map((litter1) => (
您还可以有其他条件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。