我从一个开放的API中获取了数据。从那个API，我想在浏览器上显示图像。但是问题是图像数组里面有3个图像URL。在使用数组的映射方法后，我调用了第一个对象[0]，但它不起作用。我正在使用React js是我的前端应用程序。
这是我的React js组件。
import React, { useEffect, useState } from "react";
import "./ActivitiesList.css";
import axios from "axios";
import "./ActivitiesList.css";
function ActivitiesList() {
const [activities, setactivities] = useState({ data: [] });
const [show, setshow] = useState(10);
useEffect(() => {
fetchingData();
}, []);
const fetchingData = () => {
axios
.get("/activities")
.then(response => {
//console.log("response", response);
setactivities({ data: response.data.data });
})
.catch(err => console.log(err));
};
return (
<div className="EventList">
<section className="our-event">
<div className="grid-container">
{activities.data.slice(0, show).map((list, index) => {
return (
<div key={index}>
<a
href={list.info_url} /
style={{
cursor: "pointer",
textDecoration: "none",
color: "black"
}}
target="a_blank"
>
<div className="whole">
<div className="Personcontainer">
<div className="Box">
{list.description.images.map((img, index) => {
return (
<img
src={img.url[0]} //IN HERE I TRY TO SHOW FIRST OBJECT
alt="pics"
style={{ width: "270px", height: "270px" }}
/>
);
})}
</div>
</div>
</div>
</a>
</div>
);
})}
</div>
{show < activities.data.length && (
<button onClick={() => setshow(show + 10)} className="Button">
loadmore
</button>
)}
</section>
</div>
);
}
export default ActivitiesList;
这是打开的API的JSON文件。
{
"meta": {
"count": "96",
"next": "http://open-api.myhelsinki.fi/v1/activities/?limit=1&start=1"
},
"data": [
{
"id": "f67de4f6-d23e-49a7-b9dd-63d68df533a3",
"name": {
"fi": "Purjehdus 1700-luvun tyyliin tykkisluuppi Dianalla",
"en": "Cannon sloop Diana´s sailings",
"sv": "Seglingar med kanonslupen Diana",
"zh": null
},
"source_type": {
"id": 3,
"name": "MyHelsinki"
},
"info_url": "https://www.suomenlinnatours.com/en/cannon-sloop-diana?johku_product=7",
"modified_at": "2020-01-27T09:37:27.221Z",
"location": {
"lat": 60.145111083984375,
"lon": 24.987560272216797,
"address": {
"street_address": "Suomenlinna Tykistölahti Pier",
"postal_code": null,
"locality": "Helsinki"
}
},
"description": {
"intro": null,
"body": "<p>Luvassa on amiraali Chapamin tahdittama mielenkiintoinen laivamatka valistusajan Viaporiin. Dianan purjehduksien aikana nähdään Suomenlinnaa mereltä käsin ja kuullaan saaristolaivaston kiehtovasta historiasta. Osallistujat pääsevät halutessaan avustamaan 1700-luvun univormuihin sonnustautunutta miehistöä purjeiden nostossa ja laskussa, lisäksi muutama reipas pääsee mukaan soutuharjoitukseen.</p>\r\n\r\n<p>Purjehdukset lähtevät Suomenlinnan Tykistölahden laiturista. Suomenlinnaan pääsee JT-Linen vesibussilla tai HSL:n lautalla Kauppatorilta (venematka ei kuulu lipun hintaan). Diana on avovene, joten säänmukainen varustus on tärkeä. <br />\r\n<br />\r\n<span><span>Lasten meriseikkailu – perhepurjehdus ajalla 26.6.- 3.8.2019<br />\r\nkeskiviikkoisin, torstaisin ja lauantaisin kello 12.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 12.30.<br />\r\n<br />\r\nPurjehdus 1700-luvun tyyliin – yleisöpurjehdus ajalla 26.6.- 3.8.2019:<br />\r\nKeskiviikkoisin, torstaisin ja lauantaisin kello 15.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 15.30</span></span><br />\r\n </p>\r\n",
"images": [ // FROM HERE I WANT TO SHOW FIRST OBJECT URL.
{
"url": "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana.jpg",
"copyright_holder": "",
"license_type": {
"id": 1,
"name": "All rights reserved."
}
},
{
"url": "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_2.jpg",
"copyright_holder": "",
"license_type": {
"id": 1,
"name": "All rights reserved."
}
},
{
"url": "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_3.jpg",
"copyright_holder": "",
"license_type": {
"id": 1,
"name": "All rights reserved."
}
}
]
},
"tags": [
{
"id": "myhelsinki:45",
"name": "sea"
},
{
"id": "myhelsinki:836",
"name": "suomenlinna"
},
{
"id": "myhelsinki:793",
"name": "history"
}
],
"where_when_duration": {
"where_and_when": "Suomenlinna, kesäkuusta elokuuhun",
"duration": "N. 1h 45min"
}
}
],
"tags": {
"myhelsinki:45": "sea",
"myhelsinki:793": "history",
"myhelsinki:836": "suomenlinna"
}
}
答案 0 :(得分：0)
您看起来像这样吗-演示https://codesandbox.io/s/competent-zhukovsky-icl60
假设您的状态如下所示
state = {
items: {
meta: {
count: "96",
next: "http://open-api.myhelsinki.fi/v1/activities/?limit=1&start=1"
},
data: [
{
id: "f67de4f6-d23e-49a7-b9dd-63d68df533a3",
name: {
fi: "Purjehdus 1700-luvun tyyliin tykkisluuppi Dianalla",
en: "Cannon sloop Diana´s sailings",
sv: "Seglingar med kanonslupen Diana",
zh: null
},
source_type: {
id: 3,
name: "MyHelsinki"
},
info_url:
"https://www.suomenlinnatours.com/en/cannon-sloop-diana?johku_product=7",
modified_at: "2020-01-27T09:37:27.221Z",
location: {
lat: 60.145111083984375,
lon: 24.987560272216797,
address: {
street_address: "Suomenlinna Tykistölahti Pier",
postal_code: null,
locality: "Helsinki"
}
},
description: {
intro: null,
body:
"<p>Luvassa on amiraali Chapamin tahdittama mielenkiintoinen laivamatka valistusajan Viaporiin. Dianan purjehduksien aikana nähdään Suomenlinnaa mereltä käsin ja kuullaan saaristolaivaston kiehtovasta historiasta. Osallistujat pääsevät halutessaan avustamaan 1700-luvun univormuihin sonnustautunutta miehistöä purjeiden nostossa ja laskussa, lisäksi muutama reipas pääsee mukaan soutuharjoitukseen.</p>\r\n\r\n<p>Purjehdukset lähtevät Suomenlinnan Tykistölahden laiturista. Suomenlinnaan pääsee JT-Linen vesibussilla tai HSL:n lautalla Kauppatorilta (venematka ei kuulu lipun hintaan). Diana on avovene, joten säänmukainen varustus on tärkeä. <br />\r\n<br />\r\n<span><span>Lasten meriseikkailu – perhepurjehdus ajalla 26.6.- 3.8.2019<br />\r\nkeskiviikkoisin, torstaisin ja lauantaisin kello 12.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 12.30.<br />\r\n<br />\r\nPurjehdus 1700-luvun tyyliin – yleisöpurjehdus ajalla 26.6.- 3.8.2019:<br />\r\nKeskiviikkoisin, torstaisin ja lauantaisin kello 15.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 15.30</span></span><br />\r\n </p>\r\n",
images: [
// FROM HERE I WANT TO SHOW FIRST OBJECT URL.
{
url:
"https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana.jpg",
copyright_holder: "",
license_type: {
id: 1,
name: "All rights reserved."
}
},
{
url:
"https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_2.jpg",
copyright_holder: "",
license_type: {
id: 1,
name: "All rights reserved."
}
},
{
url:
"https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_3.jpg",
copyright_holder: "",
license_type: {
id: 1,
name: "All rights reserved."
}
}
]
},
tags: [
{
id: "myhelsinki:45",
name: "sea"
},
{
id: "myhelsinki:836",
name: "suomenlinna"
},
{
id: "myhelsinki:793",
name: "history"
}
],
where_when_duration: {
where_and_when: "Suomenlinna, kesäkuusta elokuuhun",
duration: "N. 1h 45min"
}
}
],
tags: {
"myhelsinki:45": "sea",
"myhelsinki:793": "history",
"myhelsinki:836": "suomenlinna"
}
}
}
render() {
const { items } = this.state;
let images = items ? items.data[0].description.images : [];
console.log(items.data[0]);
return (
<div>
<h2>List of items</h2>
{images.map((image, index) => (
<div key={index}>
<img src={image.url} alt="imageicon" />
</div>
))}
</div>
);
}
或者使用javascript获取所有图像。
let results = {
meta: {
count: "96",
next: "http://open-api.myhelsinki.fi/v1/activities/?limit=1&start=1"
},
data: [
{
id: "f67de4f6-d23e-49a7-b9dd-63d68df533a3",
name: {
fi: "Purjehdus 1700-luvun tyyliin tykkisluuppi Dianalla",
en: "Cannon sloop Diana´s sailings",
sv: "Seglingar med kanonslupen Diana",
zh: null
},
source_type: {
id: 3,
name: "MyHelsinki"
},
info_url:
"https://www.suomenlinnatours.com/en/cannon-sloop-diana?johku_product=7",
modified_at: "2020-01-27T09:37:27.221Z",
location: {
lat: 60.145111083984375,
lon: 24.987560272216797,
address: {
street_address: "Suomenlinna Tykistölahti Pier",
postal_code: null,
locality: "Helsinki"
}
},
description: {
intro: null,
body:
"<p>Luvassa on amiraali Chapamin tahdittama mielenkiintoinen laivamatka valistusajan Viaporiin. Dianan purjehduksien aikana nähdään Suomenlinnaa mereltä käsin ja kuullaan saaristolaivaston kiehtovasta historiasta. Osallistujat pääsevät halutessaan avustamaan 1700-luvun univormuihin sonnustautunutta miehistöä purjeiden nostossa ja laskussa, lisäksi muutama reipas pääsee mukaan soutuharjoitukseen.</p>\r\n\r\n<p>Purjehdukset lähtevät Suomenlinnan Tykistölahden laiturista. Suomenlinnaan pääsee JT-Linen vesibussilla tai HSL:n lautalla Kauppatorilta (venematka ei kuulu lipun hintaan). Diana on avovene, joten säänmukainen varustus on tärkeä. <br />\r\n<br />\r\n<span><span>Lasten meriseikkailu – perhepurjehdus ajalla 26.6.- 3.8.2019<br />\r\nkeskiviikkoisin, torstaisin ja lauantaisin kello 12.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 12.30.<br />\r\n<br />\r\nPurjehdus 1700-luvun tyyliin – yleisöpurjehdus ajalla 26.6.- 3.8.2019:<br />\r\nKeskiviikkoisin, torstaisin ja lauantaisin kello 15.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 15.30</span></span><br />\r\n </p>\r\n",
images: [
// FROM HERE I WANT TO SHOW FIRST OBJECT URL.
{
url:
"https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana.jpg",
copyright_holder: "",
license_type: {
id: 1,
name: "All rights reserved."
}
},
{
url:
"https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_2.jpg",
copyright_holder: "",
license_type: {
id: 1,
name: "All rights reserved."
}
},
{
url:
"https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_3.jpg",
copyright_holder: "",
license_type: {
id: 1,
name: "All rights reserved."
}
}
]
},
tags: [
{
id: "myhelsinki:45",
name: "sea"
},
{
id: "myhelsinki:836",
name: "suomenlinna"
},
{
id: "myhelsinki:793",
name: "history"
}
],
where_when_duration: {
where_and_when: "Suomenlinna, kesäkuusta elokuuhun",
duration: "N. 1h 45min"
}
}
],
tags: {
"myhelsinki:45": "sea",
"myhelsinki:793": "history",
"myhelsinki:836": "suomenlinna"
}
}
let images = results ? results.data[0].description.images : [];
let urls = images.map(image=>image.url);
console.log(urls);
答案 1 :(得分：0)
我从JSON数据中看到的是，在images数组中有3个不同的对象，每个对象中都有一个url键。
因此，在图像数组上使用map函数时，list.description.images.map((img, index) => img.url应提供数组中每个对象的网址。
尝试使用src={img.url[0]}代替src={img.url}。
如果只想访问数组中的第一个对象，则可以删除map方法并直接使用list.description.images[0].url。
答案 2 :(得分：0)
如果只需要渲染一个图像，则不需要第二个ListView。
所以，而不是：
map使用：
<div className="Box">
{list.description.images.map((img, index) => {
return (
<img
src={img.url[0]} //IN HERE I TRY TO SHOW FIRST OBJECT
alt="pics"
style={{ width: "270px", height: "270px" }}
/>
);
})}
</div>
编辑：为避免没有图像的物品出现错误，您可以像这样检查：
<div className="Box">
<img
src={list.description.images[0].url}
alt="pics"
style={{ width: "270px", height: "270px" }}
/>
</div>
或：
<div className="Box">
{ list.description.images && list.description.images[0] &&
<img
src={list.description.images[0].url}
alt="pics"
style={{ width: "270px", height: "270px" }}
/>
}
</div>