Reaction onClick-Ereignis ergibt: "Uncaught TypeError: kann nicht lesen Eigenschaft von undefined" trotz Bindung

Question

Ich schreibe ein React-Skript, das eine Reihe von <a /> Elemente aus einem zuvor definierten Array rendern wird.

... 
render: 
... 
    var behaviourComponents = this.props.myObjectArray.map(function(element) { 
        return <a className="crumbFile" onClick={this._myFunction.bind(this,element.value1)}>{element.value2}</a>; 
       }); 
    return (
... 
<div>{behaviourComponents}</div> 
...) 

Dies funktioniert gut, wenn es keinen Funktionsaufruf mit onClick gibt. Wenn jedoch, bekomme ich den Fehler: "Uncaught TypeError: Kann die Eigenschaft '_myFunction' von undefined nicht lesen."

Dies ist besonders seltsam, weil ich eine Komponente direkt davor mit einem onClick Funktionsaufruf, der gut funktioniert (<a class="btn header" style={buttonStyle} onClick={this._onLoad}>Load</a>), die mich denken, dies ist ein Problem mit dem Umfang aufgrund der Funktion map(). Allerdings habe ich .bind() verwendet, daher bin ich mir nicht sicher, was hier falsch ist.

Answer 1

Dies liegt daran, dass der Kontext innerhalb der Funktion, die Sie an map() übergeben, sich nicht auf Ihre React-Komponentenklasse bezieht. Standardmäßig ist der Kontext das globale Window-Objekt.

Es gibt ein paar Möglichkeiten, dieses Problem zu lösen:

1) Binden Sie den richtigen Kontext von this auf die Funktion zu map() geben.

this.props.myObjectArray.map(function(element) { 
    ... 
}.bind(this)); 

2) Führen Sie den richtigen Kontext als das zweite Argument zu map()

this.props.myObjectArray.map(function(element) { 
    ... 
}, this); 

3) eine ES6 Pfeil Funktion verwenden, die für Sie den richtigen Kontext binden.

this.props.myObjectArray.map(element => { 
    ... 
});