如何在 JSX 中使用 Map 迭代嵌套的 JSON答案

【问题标题】：How to iterate over nested JSON with Map in JSX如何在 JSX 中使用 Map 迭代嵌套的 JSON
【发布时间】：2020-12-27 08:03:58
【问题描述】：

不确定如何访问 json 对象的内部。我尝试使用 Map 遍历 location 部分并获取 capital 但我收到错误 Cannot read property 'map' of undefined

如果我 console.log 只是 item.location 我得到：

 Objects are not valid as a React child (found: object with keys..
 If you meant to render a collection of children, use an array instead.

所以不确定我需要做什么才能渲染item.location.capital

json 数据：

{
  "ip": "100.200.00.000",
  "type": "ipv4",
  "continent_code": "NA",
  "continent_name": "North America",
  "country_code": "US",
  "country_name": "United States",
  "region_code": "LA",
  "region_name": "bogus",
  "city": "place",
  "zip": "90210",
  "latitude": 316,
  "longitude": 123,
  "location": {
    "geoname_id": 1234,
    "capital": "Washington D.C.",
    "languages": [
      {
        "code": "en",
        "name": "English",
        "native": "English"
      }
    ],
    "country_flag": "http://assets.ipstack.com/flags/us.svg",
    "country_flag_emoji": "????????",
    "country_flag_emoji_unicode": "U+1F1FA U+1F1F8",
    "calling_code": "1",
    "is_eu": false
  }
}

反应

 useEffect(() => {
        fetch("http://api.ipstack.com/check?access_key=" + accessKey)
        .then((response) => response.json())
        .then((data) => {
            setIpData(data) 
        }) 
        
    }, [])

 return (
        <div className="ip-results">
           <h5>IP ADDRESS</h5>
          {ipData.ip}
          
           <h5>LOCATION</h5>
         {ipData.region_name}
           
           <h5>City</h5>
           {ipData.city} 

           <h5>zip</h5>
           {ipData.zip} 

           <h5>zip</h5>
           {ipData.location.capital}        

        </div>
    )

【问题讨论】：

标签： javascript json reactjs jsx

【解决方案1】：

可能是您的某些项目没有位置键？

你可以试试这个并确认你是否得到同样的错误：

{item.location ? <> {item.location.map((l, i) => (
                    <p key={i}>{l.capital}</p>       
                    ))} </> : null}

【讨论】：

【解决方案2】：

location 是一个对象，而不是一个数组。

"location": {
    "geoname_id": 1234,
    "capital": "Washington D.C.",
    "languages": [
      {
        "code": "en",
        "name": "English",
        "native": "English"
      }
    ],
    "country_flag": "http://assets.ipstack.com/flags/us.svg",
    "country_flag_emoji": "??",
    "country_flag_emoji_unicode": "U+1F1FA U+1F1F8",
    "calling_code": "1",
    "is_eu": false
  }

而且看起来capital 有一个字符串值，所以你可以放

<p>{item.location.capital}</p>

【讨论】：

【解决方案3】：

你可以这样做：<p>{item.location.capital}</p>，但有些项目没有location key，即在某些项目上你会得到undefined。

【讨论】：

【解决方案4】：

您不能通过location 映射，因为它是一个对象而不是数组，您可以通过这种方式映射location 对象：

`Object.keys(item.location).map((item, i)=> {
      // your code here 
      // e.g : console.log(item["capital"]) 
      // output : "Washington D.C."
}`

【讨论】：

这不起作用。我收到错误：无法将 undefined 或 null 转换为对象
您的对象名称是什么？将 itemin item.location 替换为对象名称，然后重试
item.location 应该是对象名称，因为我想获得“资本”。
我的意思是完整的对象不仅是位置对象，数据或者我不知道
让我们continue this discussion in chat。