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

Question

不知道如何訪問 json object 的內部。 我嘗試使用 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>
    )

Answer 1

可能是您有一些沒有位置鍵的項目？

你可以試試這個並確認你是否得到同樣的錯誤：

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

Answer 2

location是 Object，而不是數組。

"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>

Answer 3

你可以這樣做： <p>{item.location.capital}</p>但有些項目沒有location key ，即在某些項目上你會得到undefined 。

Answer 4

你不能通過location map 因為它是一個 object 不是數組，你可以通過location map 這個：

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