ReactJS: Kann nicht bereit Eigenschaft xxx von undefined

Question

Ich bin mir bewusst, dass es viele Fragen die gleiche Frage, aber keine dieser Antworten scheinen für meinen speziellen Fall zu arbeiten, und ich habe dies für Stunden und immer noch kann es nicht herausfinden. Ich bin nach einer ReactJs Anleitung für eine WeatherApp.I erhalte ein Objekt von einem API-Aufruf zurück, die wie folgt aussieht:

{ 
    current: {} 
    forecast: 
     forecastday:[ // 
      0: {...} 
      1: {...} 
      2: {...} 
      3: {...} 
      4: {...} 
     ] //Array of five objects 
    location: {} 
} //this object is part of a bigger response object 

Als ich console.log(objectName.forecast.forecastday) ich wieder das Array erhalten, was bedeutet es eigentlich da ist.

Aber wenn ich versuche

var forecastData = props.forecast.data; 
var days = forecastData.forecast.forecastday.map(function (day) { 
     //do something 
}); 

es gibt mir wieder den Fehler Uncaught TypeError: Cannot read property 'forecast' of undefined. Ich habe auch versucht Logging forecastData und es kommt wieder gut. forecast ist eindeutig da, es sei denn, ich vermisse etwas sehr offensichtlich, ich weiß nicht, was los ist.

Danke.

Answer 1

Sie berücksichtigen höchstwahrscheinlich nicht den Ausgangszustand, in dem props.forecast.data bei der anfänglichen Bereitstellung der Komponente undefiniert sein kann, da Ihr API-Aufruf asynchron erfolgt.

Sie können etwas tun:

var days = forecastData 
    ? forecastData.forecast.forecastday.map(function (day) { 
    //do something 
    }) 
    : null; 

Dies wird zunächst prüfen, ob zu forecastData vorhanden ist, und wenn es nicht vorhanden ist, wird es über die forecastData.forecast.forecastday Array abzubilden.

Wenn "precessedData" nicht vorhanden ist, wird diese Variable null.