如何在React上访问嵌套的JSON数据？

Question

I am having trouble accessing the JSON data obtained from the Accuweather API on React in the Render Method.

I am doing this on React and get a undefined error even though I see the value in the JSON view when I open the link and format it. I have tried using the dot method but no luck.

import React, { Component } from 'react';

class App extends Component {

constructor(props){
super(props);
this.state = {
    items:[],
    isLoaded: false, 
}
}

componentDidMount() {


fetch('http://dataservice.accuweather.com/forecasts/v1/daily/1day/2094578.json?details=true&apikey=JjaFgoA67A3eXoMR7SiRyprGyPiv4Eln')

.then(res => res.json())  
.then(json => {
    this.setState({
        isLoaded:true, 
        items:json, 
      })
})
}
render() {
var {isLoaded, items} = this.state; 
if (!isLoaded) {
    return <div> Loading...</div>; 
}
else {
  return (
    <div className="App">

     <h1>IES Storm Water Forecast</h1>
     <h1>{new Date().toString()}</h1>
     <h2> Weather Forcast: {items["DailyForecasts"]["Day"]["ShortPhrase"]}</h2>

     <h3>Description: {items.Headline.Text}</h3>
     <h6>Source: Accuweather</h6>
    </div>

);
}

}

}

export default App;

JSON object in there:

http://dataservice.accuweather.com/forecasts/v1/daily/1day/2094578.json?details=true&apikey=JjaFgoA67A3eXoMR7SiRyprGyPiv4Eln

I get the following errors:

Unhandled Rejection (TypeError): Cannot read property 'ShortPhrase' of undefined TypeError: Cannot read property 'ShortPhrase' of undefined

But I should be getting a short sentence on weather.

Answer 1

The returned data has a structure like this:

obj = {
  DailyForecasts: [
    {
      Day: {
        Icon: 6,
        IconPhrase: "Mostly cloudy",
        ShortPhrase: "Mostly cloudy",
        LongPhrase: "Mostly cloudy"
      }
    }
  ]
};

You can see DailyForecasts returns an array . You will have to access this array before you access the object inside of it:

items["DailyForecasts"][0]["Day"]["ShortPhrase"]

or with shorter, dot notation:

items.DailyForecasts[0].Day.ShortPhrase

Answer 2

Add a template condition like the following: ...

else {
  return (
    <div className="App">

     <h1>IES Storm Water Forecast</h1>
     <h1>{new Date().toString()}</h1>
     <h2> Weather Forcast: {items["DailyForecasts"]["Day"] && items["DailyForecasts"]["Day"]["ShortPhrase"]}</h2>
                            ^^^

     <h3>Description: {items.Headline.Text}</h3>
     <h6>Source: Accuweather</h6>
    </div>

);
}
...