Je suis nouveau dans le monde React. Je crée une application météo et j'utilise l'API openweathermap pour obtenir des données (j'ai utilisé l'API du ciel sombre et j'ai eu le même problème). Le problème est que je récupère des données et que je les enregistre dans un état. Je suis capable d'imprimer par JSX et console.log tout le contenu de cet état mais je ne peux pas accéder à des données spécifiques à l'intérieur (par console.log et JSX). Le problème dit : TypeError : Impossible de lire la propriété 'city' d'undefined

Voici mon code:

import React from 'react';
import TemperaturesList from './TemperaturesList';
import axios from 'axios';

class WeatherData extends React.Component {
    state = { weatherData: {}, error: null };

    componentDidMount(){

        axios.get('https://samples.openweathermap.org/data/2.5/forecast?lat=${this.props.lat}&lon=${this.props.long}&appid=MYAPPID')
        .then(result => this.setState({
            weatherData: result
        }))
        .catch(error => this.setState({
            error: error
        }))

    }



    render(){
        return(
            <div>
            {JSON.stringify(this.state.weatherData)} // this works
            <h3>Current weather:</h3>
            {JSON.stringify(this.state.weatherData.data.city)} // this does not work
            </div>

        );
    };
};

export default WeatherData;

Et voici ce que je reçois de fetch and save in state:

enter image description here

2
Matt 8 mars 2019 à 21:39

2 réponses

Meilleure réponse

Avant que les données ne soient récupérées du serveur dans componentDidMount, React essaiera de rendre ce qui est actuellement dans l'état :

state = { weatherData: {}, error: null };
....
{JSON.stringify(this.state.weatherData.data.city)}

weatherData est un objet vide à ce stade.

Vous pouvez le corriger en définissant data dans l'état :

state = { weatherData: { data: {} }, error: null };
2
Tomasz Mularczyk 8 mars 2019 à 18:42

L'appel api sera déclenché après render et donc this.state.weatherData.data sera indéfini lors du rendu initial. Il est également préférable de stocker les axios response.data dans l'état plutôt que la réponse entière elle-même. Cela devrait fonctionner

import React from 'react';
import TemperaturesList from './TemperaturesList';
import axios from 'axios';

class WeatherData extends React.Component {
  state = { weatherData: {city: ''}, error: null };

  componentDidMount(){
    axios.get('https://samples.openweathermap.org/data/2.5/forecast? 
     lat=${this.props.lat}&lon=${this.props.long}&appid=MYAPPID')
    .then(result => this.setState({
        weatherData: result.data
    }))
    .catch(error => this.setState({
        error: error
    }))

}

render(){
    return(
        <div>
        {JSON.stringify(this.state.weatherData)}
        <h3>Current weather:</h3>
        {JSON.stringify(this.state.weatherData.data.city)}
        </div>

    );
 };
 };

 export default WeatherData;
0
Muhammed Anees 8 mars 2019 à 18:51