我只使用 React js 从对象数组中返回一张卡片和一张图像

Question

我有这个数据

[
    {
        "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) 中第一个显示的对象随机返回。

如何显示每张图片的所有卡片？谢谢

Answer 1

您需要在 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>;

工作stackblitz

Answer 2

看起来你的函数接受了一个参数 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}
    />
  );
 }
)

我只使用 React js 从对象数组中返回一张卡片和一张图像

I only returning 1 card an an image from the array of objects using React js

javascript

html

reactjs

card