Utilisation des accessoires React dans la fonction .map

Question

Disons que j'ai la fonction de rendu suivante sur l'un de mes composants. De l'élément parent, j'ai passé une fonction changeTid prop.

Parent:

<RequestsList data={this.state.data} changeTid={this.changeTid} />

Enfant:

(J'utilise des classes ES6)

render() {  
var RequestNodes = this.props.data.map(function(request) {
  return (
    <Request 
        key={request.TID} 
        changeTid={this.props.changeTid}
    />
  );
});

    return (
        <div className="list-group">{RequestNodes}</div>
    );
}

Je ne peux pas utiliser this.props.changeTid dans ma fonction de carte comme this ne fait pas référence à ce que je ne veux pas. Où dois-je le lier pour pouvoir accéder à mon props?

Answer 1

Vous pouvez définir this pour .map rappel via le deuxième argument

var RequestNodes = this.props.data.map(function(request) {
   /// ...
}, this);

ou vous pouvez utiliser fonction flèche qui n'a pas de this, et this à l'intérieur fait référence au contexte englobant

var RequestNodes = this.props.data.map((request) => {
       /// ...
});

Answer 2

Si vous utilisez ES6, vous pouvez utiliser fonctions fléchées qui ne lie pas son propre this

var RequestNodes = this.props.data.map(request => {
  return (
    <Request 
        key={request.TID} 
        changeTid={this.props.changeTid}
    />
  );
});