我只使用 React js 从对象数组中返回一张卡片和一张图像
I only returning 1 card an an image from the array of objects using React js
我有这个数据
[
{
"filePath": "imageFile",
"locationName": "name1"
},
{
"filePath": "imageFile",
"locationName": "name2"
}
]
我返回 filePath 的值以在卡片中使用 React js 显示图像,如下所示:
const images = (displayimage) => {
return displayImages.map((displayimage, key) => (
<div key={key}>
<div className="card bg-light mb-3">
<div className="card-header">
<center>{displayimage.locationName}</center>
</div>
<div className="card-body">
<div className="imgDiv">
<img src={displayimage.filePath} />
</div>
</div>
</div>
</div>
));
}
return <div>{images()}</div>;
};
但只有 1 张卡片返回,然后图像根据 console.log(displayImages) 中第一个显示的对象随机返回。
如何显示每张图片的所有卡片?谢谢
您需要在 images
常量中存储的只是对 displayImages
数组调用 map()
的结果。所以假设你有:
const displayImages = [
{
filePath: "imageFile",
locationName: "name1"
},
{
filePath: "imageFile",
locationName: "name2"
}
];
你的组件应该是这样的:
const images = displayImages.map((displayimage, key) => (
<div key={key}>
<div className="card bg-light mb-3">
<div className="card-header">
<center>{displayimage.locationName}</center>
</div>
<div className="card-body">
<div className="imgDiv">
<img src={displayimage.filePath} />
</div>
</div>
</div>
</div>
));
return <div>{images}</div>;
看起来你的函数接受了一个参数 displayimage
但随后你映射了一个名为 displayimages
的变量(注意 s),.
此外,当您在 return 语句中调用函数时,没有提供任何参数。
我不确定您是否在实际代码中解决了上述问题,但这肯定会产生问题。
如果您已经解决了这些问题,我建议您创建一个名为 ImageCard
的组件,它将图像位置名称和文件路径作为道具,例如
const ImageCard= ({locationName,imagePath}) => {
return (
<div>
<div className="card bg-light mb-3">
<div className="card-header">
<center>{locationName}</center>
</div>
<div className="card-body">
<div className="imgDiv">
<img src={filePath} />
</div>
</div>
</div>
</div>)
};
export default ImageCard;
然后,在您当前制作地图的位置,按如下方式在 return 中迭代图像数据(假设您的数据称为 displayImages)
return (
displayImages.map(displayImage=>{
return (
<ImageCard
locationName={displayImage.locationName}
imagePath={displayImage.filePath}
/>
);
}
)
我有这个数据
[
{
"filePath": "imageFile",
"locationName": "name1"
},
{
"filePath": "imageFile",
"locationName": "name2"
}
]
我返回 filePath 的值以在卡片中使用 React js 显示图像,如下所示:
const images = (displayimage) => {
return displayImages.map((displayimage, key) => (
<div key={key}>
<div className="card bg-light mb-3">
<div className="card-header">
<center>{displayimage.locationName}</center>
</div>
<div className="card-body">
<div className="imgDiv">
<img src={displayimage.filePath} />
</div>
</div>
</div>
</div>
));
}
return <div>{images()}</div>;
};
但只有 1 张卡片返回,然后图像根据 console.log(displayImages) 中第一个显示的对象随机返回。
如何显示每张图片的所有卡片?谢谢
您需要在 images
常量中存储的只是对 displayImages
数组调用 map()
的结果。所以假设你有:
const displayImages = [
{
filePath: "imageFile",
locationName: "name1"
},
{
filePath: "imageFile",
locationName: "name2"
}
];
你的组件应该是这样的:
const images = displayImages.map((displayimage, key) => (
<div key={key}>
<div className="card bg-light mb-3">
<div className="card-header">
<center>{displayimage.locationName}</center>
</div>
<div className="card-body">
<div className="imgDiv">
<img src={displayimage.filePath} />
</div>
</div>
</div>
</div>
));
return <div>{images}</div>;
看起来你的函数接受了一个参数 displayimage
但随后你映射了一个名为 displayimages
的变量(注意 s),.
此外,当您在 return 语句中调用函数时,没有提供任何参数。
我不确定您是否在实际代码中解决了上述问题,但这肯定会产生问题。
如果您已经解决了这些问题,我建议您创建一个名为 ImageCard
的组件,它将图像位置名称和文件路径作为道具,例如
const ImageCard= ({locationName,imagePath}) => {
return (
<div>
<div className="card bg-light mb-3">
<div className="card-header">
<center>{locationName}</center>
</div>
<div className="card-body">
<div className="imgDiv">
<img src={filePath} />
</div>
</div>
</div>
</div>)
};
export default ImageCard;
然后,在您当前制作地图的位置,按如下方式在 return 中迭代图像数据(假设您的数据称为 displayImages)
return (
displayImages.map(displayImage=>{
return (
<ImageCard
locationName={displayImage.locationName}
imagePath={displayImage.filePath}
/>
);
}
)