React: this.state verschwindet in für Schleife

Question

Wie kann ich this in meine .map() Schleife tragen? Es scheint zu verschwinden. :-(

Ich bin eine „dynamische Form“ schaffen, in dem der Benutzer mehrere Eingabezeilen für seine Form geben kann. Ich möchte state.items[] alle Elemente iterieren und Formulareingabefelder für sie zu bauen.

zum Beispiel beginnt das Formular mit ‚Feld‘ und ‚autocomplete_from. der Benutzer kann dann eine neue Zeile hinzufügen klicken, kann mehrere Zeilen in seiner Form zu erhalten.

102  render: function() { 
103  return (
104   <div> 
105   {this.state.items.map(function(object, i){ 
106    return (
107    <div> 
109     <FieldName/> 

110     <strong> State.autocomplete_from: 
          {this.state.autocomplete_from} </strong> 
         //  ^^^ 
         // Uncaught TypeError: Cannot read property 'state' of undefined 

120     <button onClick={this.newFieldEntry}>Create a new field</button> 
121     <button onClick={this.saveAndContinue}>Save and Continue</button> 
122    </div> 
123    ); 
124   })} 
125   </div> 
126  ); 

Answer 1

in .mapdiese nicht auf Ihre Komponente bezieht. Es gibt verschiedene Wege wie du Um dieses Problem

1. Speichern this variable

   render: function() { 
       var _this = this; 
   
       return (
       <div> 
       {this.state.items.map(function(object, i){ 
        return (
        <div> 
         <FieldName/> 
   
         <strong> State.autocomplete_from: 
         {_this.state.autocomplete_from} </strong> 
   
         <button onClick={this.newFieldEntry}>Create a new field</button> 
         <button onClick={this.saveAndContinue}>Save and Continue</button> 
        </div> 
        ); 
       })} 
       </div> 
   ); 
   } 
   

   lösen

2. Set this für .map Rückruf (wenn Sie nicht ES2015 Funktionen verwenden können, ist diese Variante bevorzugt)

   this.state.items.map(function (object, i) { 
       // .... 
   }, this); 
   

3. Verwenden Sie arrow function

   this.state.items.map((object, i) => { 
       // .... 
   }) 
   

4. Verwendung .bind

   this.state.items.map(function(object, i) { 
       // .... 
   }.bind(this)) 
   

Answer 2

zweite Argument für iterative Verfahren wie map und filter ist this Objekt

so können Sie es wie folgt:

this.state.items.map(yourfunction,this)

Answer 3

Wenn Sie eine Funktion aufrufen. Dies wird auf das globale Objekt gesetzt, es sei denn, es handelt sich um eine Member-Methode, die Sie aufrufen, oder Sie rufen entweder .call oder .apply auf, was in Ihrem Fall nicht möglich ist.

oder mit anderen Worten können Sie nicht schließen über this Sie können jedoch näher über eine Standardvariable, der Sie dies zugewiesen haben. So im Allgemeinen, wenn Sie eine Funktion haben, in einem anderen funtion verschachtelt und Sie möchten dies tun refere:

function outer(){ 
    var _this = this; 
    someThingThatAcceptsACallback(function(){ 
     console.log(_this.state); 
    } 
} 

Answer 4

Wenn Sie Babel oder andere moderne EcmaScript6- mit> JS5 Compiler, Sie eine einfachere Syntax für verwenden können den Kontext des äußeren Kontext zu bewahren:

{ 
    this.state.items.map((object, i) => { 
     return (<div> 
       <strong> State.autocomplete_from: 
        {this.state.autocomplete_from} 
       </strong> 
       /*.... your code ...*/ </div>); 
    }); 
} 

durch den Pfeil Funktion Syntax, die this Kontext wird automatisch innerhalb der enthaltenen Funktion gebunden, so dass Sie this wie Sie bereits waren und Sie brauchen nicht zu tun, verwenden können etwas Besonderes in deinem Code.