时间戳

首页 > 解决方案 > 如何映射数组中的所有图像url

javascript - 如何映射数组中的所有图像url

问题描述

大家好，我有以下代码：我的代码

我收到来自后端的一些响应。

我正在尝试从组件中获取所有图像imagesData并显示在ImageComponent组件中。

我以这种方式在我的主要组件中使用地图功能：

{!!res &&
    res.map((data) => 
    {
     return <ImageComponent key={data.publicId} {...data} />;
    })}

这是我的 ImageComponent组件：

const ImageComponent = ({ img }) => {
  return (
   <div>
     <img src={img} alt="pic" />
   </div>
  );
};

但是出了点问题，请帮我解决这个问题。

标签： javascriptreactjs

解决方案

您正在将map方法应用于res，它object不是array. Map 方法是为数组制作的。您所要做的就是访问 Object 中存在的图像数组，然后应用map.

在这里阅读地图

  return (
    <div className="App">
      {!!res &&
        res.imagesData.map((data) => {
          return <ImageComponent key={data.publicId} {...data} />;
        })}
    </div>
  );

在您的ImageComponent中，您必须传入url解构的道具，因为它是包含图像实际 url 的 url 属性


const ImageComponent = ({ url }) => {
  return (
    <div>
      <img src={url} alt="pic" />
    </div>
  );
};

推荐阅读