React Redux - Erreur sur le rendu car attendre les accessoires qui ne sont pas encore arrivés

Question

Après avoir récupéré les données d'une API, et mis ces données dans l'état Redux, j'utilise une fonction d'aide dans mapStatetoProps pour sélectionner et modifier une partie de ces données et passez-le modifié au props.

Donc, sans le rendu, je peux voir dans le console.log que tout se passe comme il se doit.

1. accessoires vides: this.props.pageContent = {}
2. Les données fetch et mises en correspondance avec des accessoires: this.props.pageContent = { pageSection: [{something here that I don't want}, {}, {}...] }
3. Les données que je veux sélectionné et transmis aux accessoires: this.props.pageContent = { pageSection: [{card: 'my Data'}, {}, {}...] }

mais quand je passe un peu props à un composant il jette une erreur parce que ceux props que j'essaye de passer ne sont pas encore arrivés à this.props (dans ce cas card.cardTitle)

Ceci est mon code à ce jour:

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> 
    ); 
    } 

Toutes les idées? avant la return j'ai essayé d'avoir une déclaration if avec des options diférents, mais l'erreur conserve le même: TypeError: Cannot read property '0' of undefined

Answer 1

Vous avez un problème ici if (!this.props.pageContent.pageSection[0].card)

remplacer

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

avec

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

Parce que vous n'êtes pas sûr que vos accessoires a pageContent et vous êtes également pas sûr que pageSection existe, car avant de les accessoires pageContent est undefined et que vous essayez d'accéder à un objet à l'intérieur puis trouver l'élément dans un tableau

Essayez le code mis à jour ci-dessous:

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>); 
     } 

     }