Uzyskiwanie dostępu do atrybutów obiektów w metodzie renderowania Reagent

Question

Napisałem mały komponent reagujący, który pobiera niektóre dane z api aplikacji pogodowej. Pobieranie się powiedzie i mogę uzyskać obiekt Json w odpowiedzi.

I następnie zapisać tę odpowiedź do stanu komponentów przy użyciu this.setState({})

I reagują narzędzia dev pokazać obiekt prognoza jest rzeczywiście zapisane w państwie.

Jednak kiedy przychodzę do renderowania danych, zawsze otrzymuję komunikat o błędzie z informacją, że "nie można odczytać właściwości" "z wartością null".

Poniżej przedstawiono składnik reakcji i zrzut ekranu samego obiektu.

export default class Weather extends Component { 
    getWeather() { 
     var self = this; 

     fetch('http://api.openweathermap.org/data/2.5/weather?zip=sl44jn,uk&units=metric&APPID=ed066f80b6580c11d8d0b2fb71691a2c') 
      .then (function (response) { 
       if (response.status !== 200) { 
        console.log('Looks like there was a problem. Status Code: ' + response.status); 
        return; 
       } 

       response.json().then(function(data) { 
        self.setWeather(data); 
       }); 
      }) 

      .catch (function (err) { 
       console.log('Fetch Error :-S', err); 
      }); 
    } 

    setWeather (forecast) { 
     console.log(forecast); 
     this.setState({ 
      forecast: forecast.name 
     }) 
    } 

    componentWillMount() { 
     this.getWeather(); 
    } 

    componentDidMount() { 
     // window.setInterval(function() { 
    //   this.getWeather(); 
    // }.bind(this), 1000); 
    } 

    render() { 
    return (
     <h1>{this.state.forecast}</h1> 
    ) 
    } 
} 

A to jest sam obiekt danych, teraz próbuję po prostu uzyskać dostęp do atrybutu name.

Answer 1

Wygląda jakbyś zapomniał kilka rzeczy, w celu: a Component do setState trzeba powiązać go z this najlepiej w konstruktorze. Musisz także ustawić stan początkowy, w twoim przypadku pusty obiekt, i możesz zapisać całą odpowiedź w obiekcie i uzyskać dostęp do żądanych części. spójrz na:

export default class Weather extends Component { 

constructor() { 
    super(); 
    this.state = { 
     forecast: {} 
    }; 
    this.setWeather = this.setWeather.bind(this); 
    } 

    getWeather() { 
    let self = this; 
    fetch('http://api.openweathermap.org/data/2.5/weather?zip=sl44jn,uk&units=metric&APPID=ed066f80b6580c11d8d0b2fb71691a2c') 
     .then (function (response) { 
     if (response.status !== 200) { 
      console.log('Looks like there was a problem. Status Code: ' + response.status); 
      return; 
     } 
     response.json().then(function(data) { 
     self.setWeather(data); 
     }); 
    }) 
    .catch (function (err) { 
     console.log('Fetch Error :-S', err); 
    }); 
    } 

    setWeather (forecast) { 
    this.setState({ 
     forecast: forecast 
    }); 
    } 

    componentWillMount() { 
    this.getWeather(); 
    } 

    render() { 
    const { forecast } = this.state; 
    return (
     <h1>{forecast.name}</h1> 
    ) 
    } 
}