React Redux - Fehler beim Rendern, da Requisiten erwartet werden, die noch nicht angekommen sind

Question

Nachdem ich die Daten von einer API abgerufen habe und diese Daten in den Redux-Zustand versetzt habe, verwende ich eine Hilfsfunktion in mapStatetoProps, um einen Teil davon auszuwählen und zu ändern diese Daten und übergeben sie an die props geändert.

Also ohne das Rendering kann ich in der console.log sehen, dass alles so geht, wie es sollte.

1. Leere Requisiten: this.props.pageContent = {}
2. Die Daten und hol zu Requisiten abgebildet: this.props.pageContent = { pageSection: [{something here that I don't want}, {}, {}...] }
3. Die Daten, wie ich es zu den Requisiten ausgewählt wollen und übergeben: this.props.pageContent = { pageSection: [{card: 'my Data'}, {}, {}...] }

aber wenn ich passieren einige props zu einer Komponente wirft es einen Fehler, weil die props, die ich versuche zu übergeben sind noch nicht angekommen this.props (in diesem Fall card.cardTitle)

Dies ist mein Code so weit:

class Page extends Component { 
    componentWillMount() { 
    this.props.fetchPageContent(); 
    } 
    render() { 
    console.log(this.props.pageContent) 
     if (!this.props.pageContent.pageSection[0].card) return null; 
    return (
     <div> 
     <PageSection 
      introSectionCardTitle={ this.props.pageContent.pageSection[0].card.cardTitle} 
      introSectionCardContent={ this.props.pageContent.pageSection[0].card.cardContent} 
     /> 
     </div> 
    ); 
    } 

Irgendwelche Ideen? vor dem return ich versucht, eine if Aussage mit diferent Optionen haben, aber der Fehler bleibt das gleiche: TypeError: Cannot read property '0' of undefined

Answer 1

Sie haben hier ein Problem if (!this.props.pageContent.pageSection[0].card)

if (!this.props.pageContent.pageSection[0].card)

mit

ersetzen

if(this.props.pageContent && this.props.pageContent.pageSection && this.props.pageContent.pageSection[0].card)

Weil Sie sich nicht sicher sind, dass Ihre Requisiten pageContent hat und Sie sind auch nicht sicher, dass pageSection existieren, denn bevor die Requisiten Einstellung pageContentundefined ist und Sie versuchen, ein Objekt in darauf zuzugreifen und dann in einem Array finden Element

Versuchen Sie, den aktualisierten Code unten:

class Page extends Component { 
     componentWillMount() { 
     this.props.fetchPageContent(); 
     } 
     render() { 
     console.log(this.props.pageContent) 
     if(this.props.pageContent && this.props.pageContent.pageSection && this.props.pageContent.pageSection[0].card) 
     { 
      return (
       <div> 
       <PageSection 
        introSectionCardTitle={ this.props.pageContent.pageSection[0].card.cardTitle} 
        introSectionCardContent={ this.props.pageContent.pageSection[0].card.cardContent} 
       /> 
       </div> 
      ); 
     } 
     else 
     { 
      return (<div></div>); 
     } 

     }