Reagierung des verschachtelten JSON-Schlüssels vor dem Rendern

Question

Ich erhalte Daten von MarvelAPI und es gibt keine Garantie, ob der Schlüssel, auf den ich zugreife, verfügbar ist oder nicht. Also überprüfe ich jeden Schlüssel mit einer if-Anweisung, bevor ich darauf zugreife.

Wie Sie sehen, sieht der Code unten sehr hässlich aus. Gibt es einen viel besseren/Standard Weg dies zu tun?

renderCharacterNames(detail) { 
    console.log('detail', detail) 
    if (detail && detail[0] && detail[0].characters && detail[0].characters.items && detail[0].characters.items.length > 0) { 
     return (
      <div> 
       {detail[0].characters.items.map((obj, index) => { 
        return <li key={index}>{obj.name}</li> 
       })} 
      </div> 
     ) 
    } else { 
     return <div>No Character Name</div> 
    } 
} 

renderComicDetail() { 
    var detail = this.props.comicDetail; 
    if (!detail) { 
     return (
      <div>No Data Yet (loading?)</div> 
     ) 
    } 
    return (
     <div> 
      {this.renderCharacterNames(detail)} 
     </div> 
    ) 
} 

Answer 1

für jede Taste Set default properties, so haben Sie, um sie keine Sorgen über nicht definiert ist. Ich würde den Standardnamen auf "" und die Zeichen auf ein leeres Array setzen.

Detail.defaultProps = { Name: '', Zeichen: [] };