时间戳

首页 > 解决方案 > 在 React 渲染中循环对象

javascript - 在 React 渲染中循环对象

问题描述

我有一些 JSON 在我的 React 应用程序中循环。在我循环的 JSON 中，我有一个包含多个图像的对象。我想遍历这些图像并渲染它们中的每一个。这是我尝试过的：

const locations = [
  {
    "name": "First Location",
    "photos": [
      {
        "url": "http://placehold.it/250x250",
      }, {
        "url": "http://placehold.it/250x250",
      }
    ]
  }, {
    "name": "Second Location",
    "photos": [
      {
        "url": "http://placehold.it/250x250",
      }, {
        "url": "http://placehold.it/250x250",
      }
    ]
  }
]

const element = (
  <div className="community-list">
    {locations && locations.map((location, index) => (
      <div key={index} className="location">
        <h2>{location.name}</h2>
        {Object.keys(location.photos).map(function(key) {
          return <img src="{location.photos[url]}" />;
        })}
      </div>
    ))}
  </div>
);
ReactDOM.render(element, document.getElementById('mountNode'));

然而，这给了我 2 张破碎的图像

标签： javascriptreactjs

解决方案

实际问题，img 标签有一个额外的双引号。删除包含大括号的双引号。将显示您的图像

<img src={location.photos[url]} />

推荐阅读