无法在 ReactJS 中使用 map 迭代对象
2021-08-30
90
我尝试使用地图遍历一个对象，但在网站和控制台上都出现此错误：
TypeError: Cannot read property 'map' of undefined
我尝试仅显示城市的 countryName 和人口，但地图似乎不起作用。我从 geoAPI 获取 json，返回以下内容：
{
"totalResultsCount":12132606,
"geonames":[
{
"adminCode1":"01",
"lng":"22.78333",
"geonameId":907155,
"toponymName":"Mayela",
"countryId":"895949",
"fcl":"V",
"population":0,
"countryCode":"ZM",
"name":"Mayela",
"fclName":"forest,heath,...",
"adminCodes1":{
"ISO3166_2":"01"
},
"countryName":"Zambia",
"fcodeName":"forest(s)",
"adminName1":"Western",
"lat":"-15.33333",
"fcode":"FRST"
},
{
"adminCode1":"03",
"lng":"33.31667",
"geonameId":907156,
"toponymName":"Mayekeya",
"countryId":"895949",
"fcl":"P",
"population":0,
"countryCode":"ZM",
"name":"Mayekeya",
"fclName":"city, village,...",
"adminCodes1":{
"ISO3166_2":"03"
},
"countryName":"Zambia",
"fcodeName":"populated place",
"adminName1":"Eastern",
"lat":"-12.36667",
"fcode":"PPL"
},
{
"adminCode1":"01",
"lng":"23.15",
"geonameId":907157,
"toponymName":"Mayekabu",
"countryId":"895949",
"fcl":"P",
"population":0,
"countryCode":"ZM",
"name":"Mayekabu",
"fclName":"city, village,...",
"adminCodes1":{
"ISO3166_2":"01"
},
"countryName":"Zambia",
"fcodeName":"populated place",
"adminName1":"Western",
"lat":"-15.6",
"fcode":"PPL"
},
{
"adminCode1":"05",
"lng":"30.45064",
"geonameId":907158,
"toponymName":"Mayebwe",
"countryId":"895949",
"fcl":"H",
"population":0,
"countryCode":"ZM",
"name":"Mayebwe",
"fclName":"stream, lake, ...",
"adminCodes1":{
"ISO3166_2":"05"
},
"countryName":"Zambia",
"fcodeName":"stream",
"adminName1":"Northern",
"lat":"-10.32684",
"fcode":"STM"
},
{
"adminCode1":"01",
"lng":"22.96667",
"geonameId":907159,
"toponymName":"Mayayu",
"countryId":"895949",
"fcl":"H",
"population":0,
"countryCode":"ZM",
"name":"Mayayu",
"fclName":"stream, lake, ...",
"adminCodes1":{
"ISO3166_2":"01"
},
"countryName":"Zambia",
"fcodeName":"waterhole(s)",
"adminName1":"Western",
"lat":"-15",
"fcode":"WTRH"
},
{
"adminCode1":"10",
"lng":"33.23333",
"geonameId":907160,
"toponymName":"Mayaya",
"countryId":"895949",
"fcl":"H",
"population":0,
"countryCode":"ZM",
"name":"Mayaya",
"fclName":"stream, lake, ...",
"adminCodes1":{
"ISO3166_2":"10"
},
"countryName":"Zambia",
"fcodeName":"stream",
"adminName1":"Muchinga",
"lat":"-10",
"fcode":"STM"
},
{
"adminCode1":"02",
"lng":"28.28333",
"geonameId":907161,
"toponymName":"Mayaya",
"countryId":"895949",
"fcl":"P",
"population":0,
"countryCode":"ZM",
"name":"Mayaya",
"fclName":"city, village,...",
"adminCodes1":{
"ISO3166_2":"02"
},
"countryName":"Zambia",
"fcodeName":"populated place",
"adminName1":"Central",
"lat":"-14.15",
"fcode":"PPL"
},
{
"adminCode1":"03",
"lng":"30.25968",
"geonameId":907162,
"toponymName":"Mayawa",
"countryId":"895949",
"fcl":"P",
"population":0,
"countryCode":"ZM",
"name":"Mayawa",
"fclName":"city, village,...",
"adminCodes1":{
"ISO3166_2":"03"
},
"countryName":"Zambia",
"fcodeName":"populated place",
"adminName1":"Eastern",
"lat":"-14.40278",
"fcode":"PPL"
},
{
"adminCode1":"06",
"lng":"24.25763",
"geonameId":907163,
"toponymName":"Mayau",
"countryId":"895949",
"fcl":"H",
"population":0,
"countryCode":"ZM",
"name":"Mayau",
"fclName":"stream, lake, ...",
"adminCodes1":{
"ISO3166_2":"06"
},
"countryName":"Zambia",
"fcodeName":"stream",
"adminName1":"North-Western",
"lat":"-12.75585",
"fcode":"STM"
},
{
"adminCode1":"01",
"lng":"22.96667",
"geonameId":907164,
"toponymName":"Mayapi",
"countryId":"895949",
"fcl":"P",
"population":0,
"countryCode":"ZM",
"name":"Mayapi",
"fclName":"city, village,...",
"adminCodes1":{
"ISO3166_2":"01"
},
"countryName":"Zambia",
"fcodeName":"populated place",
"adminName1":"Western",
"lat":"-14.96667",
"fcode":"PPL"
}
]
}
我尝试在 Google 上搜索并尝试了一些地图解决方案，但我觉得问题在于我无法正确读取对象。 这是我的代码：
import react, { useState, useEffect } from "react";
import TextFieldAPI from "./TextFieldAPI";
import ButtonAPI from "./ButtonAPI";
import Card from "@material-ui/core/Card";
import Button from "@material-ui/core/Button";
import SearchIcon from "@material-ui/icons/Search";
const url = "http://api.geonames.org/searchJSON?username=weknowit";
function FetchGeoAPI() {
const [data, setData] = useState();
const getData = () => {
fetch(url)
.then((response) => response.json())
.then((json) => {
console.log(json);
setData(json);
});
};
useEffect(() => {
getData();
}, []);
return (
<div>
{data.map((geo) => {
return (
<div>
<h5>{geo.geonames.name}</h5>
<h5>{geo.geonames.population}</h5>
</div>
);
})}
</div>
);
}
export default FetchGeoAPI;
3个回答
您需要在引导时调用您的获取函数。
useEffect(() => {
getData();
}, []);
并向您的映射函数添加一个？来检查它是否不为空。
编辑：之后查看响应 API。
{data?.geonames?.map((geo) => {
return (
<div>
<h5>{geo.name}</h5>
<h5>{geo.population}</h5>
</div>
);
})}
Jacopo Bonomi
2021-08-30
您需要迭代数据内的数组而不是数据对象。
data.geonames.map(() => .... )
vaira
2021-08-30
您无法在对象上运行地图，它仅适用于数组
您在数据中获得了对象，它包含 geonames 数组，因此请使用它
<div>
{data.geonames.map((geo) => {
return (
<div>
<h5>{geo.name}</h5>
<h5>{geo.population}</h5>
</div>
);
})}
</div>
Muhammad Usama Ashraf
2021-08-30