JS React - Comment passer différents accessoires dans une carte d'autres accessoires

Question

Question: Comment puis-je passer ce tableau params dans mon élément <Post /> avec le tableau data cartographié? mon état a deux tableaux. this.state = { data: [], params: [] }; et je les ai transmis via les accessoires à un fichier appelé PostList.js. Il rend chaque poste (à partir du tableau de données) en fonction de la carte, voir ci-dessous:

//PostList.js 
//.....Removed for brevity.... 
render(){ 
    // Tried let params = this.props.params; HERE 
    let socialPostNodes = this.props.data.map(socialPost => { 
     // Tried let params = this.props.params; HERE 
     return (
      <Post 
       //I need params = { this.props.params } HERE 
       messageNumber = { socialPost.message.indexOf('', 1) } 
       message={ socialPost.message} 
       uniqueID={ socialPost['_id'] } 
       key={ socialPost['_id'] } > 
       { socialPost.message } 
      </Post> 
     ) 
    }); 
//.....removed for brevity...... 

je dois mettre le this.props.params en <Post /> pour que je puisse les référencer dans le fichier Post.js, mais je ne le font pas savoir comment et ne peut pas trouver la réponse.

Si j'essaie d'ajouter let params = this.props.params; après render() ou même avant return(..., les accessoires ne sont pas obtenus. Cela signifie que je ne peux pas mettre <Post params={ params }... </Post>. Question: Comment puis-je passer ce tableau params dans mon composant <Post /> avec le tableau data en cours de mappage?

Si vous vous demandez: - Il existe des données dans les tableaux - Passage vers le bas du composant parent a réussi - le fichier Post.js-t avec succès ce que je dois - Je suis nouveau à reactJS - I peut mettre plus de fichier, il suffit de demander Merci!

EDIT Ajout du fichier Post.js Il cherche {{entreprise}} dans le message de poste et le remplace par la chaîne « société »

class Post extends Component { 
    loadInParams() { 
     let socialMessage = this.props.message; 
     if (socialMessage.indexOf("{{company}}") >= 0) { 
      let newSocialMessage = socialMessage.replace("{{company}}", 'company') 
      return newSocialMessage 
     } else { 
      let newSocialMessage = socialMessage; 
      return newSocialMessage 
     } 
    } 

    render() { 
     return (
      <div> 
       <h4> Post { this.props.messageNumber } </h4> 
       <strong>Post Template: </strong> { this.props.message } 
       <br /> 
       <strong>Ready Post: </strong> 
       { this.loadInParams() } 
      </div> 
     ) 
    } 
} 

Answer 1

Le champ this est perdu lorsque vous entrez map! Mais la fonction map vous permet de fournir un second argument pour fournir le contexte this.

E.g .;

this.props.data.map(socialPost => { 
    ... 
}, this); 

passage dans ce second argument vous permettra d'accéder au this de la portée des parents, ce qui signifie que this.props.params aura maintenant des valeurs.