web-dev-qa-db-fra.com

Appeler des fonctions à l'intérieur d'une fonction map () dans React render ()

Ceci fait suite à ma question précédente, mais comment appeler une fonction à l'intérieur de la méthode render () de React, si j'ai une carte à l'intérieur.

Exemple (ce code est dans une classe qui étend React.Component):

getItemInfo(item){
  return `${item.Something} ${item.SomethingElse}`
}

render() {

return (
 <div className="someDiv">
    {
      collection.map(function (item) {
        return <div> {item.Name} {this.getItemInfo(item)} </div>
    })
  }
 </div>
);

}

Peu importe ce que j'essaie, je finis toujours par obtenir que "this.getItemInfo () n'est pas une fonction".

J'ai fait un console.log Sur this à l'intérieur de ma fonction map() et c'était en fait référence à l'objet Window, mais je n'arrive pas à trouver un moyen de changer cela.

Je suis fatigué:

  • définition de getItemInfo en tant que fonction getItemInfo () {..}
  • en passant this comme deuxième paramètre à ma fonction de carte
  • appel de this.getItemInfo = this.getItemInfo.bind(this) dans le constructeur de composants de react
  • appel de .bind(this) après getItemInfo(item)

Et quelques autres choses ...

Aucun n'a fonctionné. Je suis assez nouveau dans la référence this de JavaScript, et je n'arrive pas à le comprendre.

J'ai lu ici quelques réponses liées à l'utilisation de ceci à l'intérieur de render() mais aucune d'entre elles ne semblait fonctionner pour moi.

javascriptreactjsdictionarythis
8
Kobek
collection.map(function (item) {
    return <div> {item.Name} {this.getItemInfo(item)} </div>
})

Ainsi, la portée de this à l'intérieur de votre function(item) n'est pas la portée de votre composant React.

Si vous utilisez la fonction flèche () => {...} Au lieu de function() {...}, vous aurez accès à this de React.Component.

Essaye ça

collection.map((item) => (
   <div> {item.Name} {this.getItemInfo.call(this, item)} </div>
))

Pour en savoir plus sur la portée de this en javascript, vous pouvez lire ici: http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

Pour en savoir plus sur les fonctions fléchées et la portée de this, reportez-vous à la section "Pas de séparer cette" de https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Fonctions/Arrow_functions

16
Naisheel Verdhan