React: this.state znika w pętli for

Question

Jak mogę przenieść this do mojej pętli ? Wygląda na to, że znika. :-(

Tworzę „dynamiczną formę”, gdzie użytkownik może określić wiele linii wejścia do jego formy. Chcę iteracyjne nad wszystkich elementów w state.items[] i budować pól wejściowych formularzy dla nich.

np forma zaczyna się od „pola” i „autocomplete_from. użytkownik może następnie kliknij dodać nową linię, aby uzyskać więcej wierszy w jego formie.

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

w .mapten nie odnosi się do składnika. , jest kilka sposobów, w jaki sposób Można rozwiązać ten problem

1. Zapisz this zmiennej

   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> 
   ); 
   } 
   

2. Ustaw this dla .map zwrotnego (jeśli nie można użyć ES2015 funkcji, ten wariant jest preferowany)

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

3. użycie arrow function

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

4. użycie .bind

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

Answer 2

Drugi argument do metody iteracyjnej, takich jak map i filter jest this obiekt

, dzięki czemu można go używać w następujący sposób:

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

Answer 3

Po wywołaniu funkcji. To jest ustawione na obiekt globalny, chyba że jest to metoda członkowska, którą wywołujesz lub wywołujesz z .call lub .apply, której nie możesz w swoim przypadku.

lub innymi słowy, nie można zamknąć ponad this można jednak zbliżyć się do standardowej zmiennej, do której to przypisano. Tak w ogóle, jeśli funkcja zagnieżdżona wewnątrz innego funtion i chcesz referen aby to zrobić:

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

Answer 4

Jeśli używasz Babel lub inną nowoczesną EcmaScript6-> JS5 kompilator, można użyć prostszej składni zachowaniu kontekstu zewnętrznego kontekstu:

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

używając składni funkcji strzałka kontekst this wiąże się automatycznie w funkcji zawartych, dzięki czemu można używać this jak już były i nie trzeba robić cokolwiek specjalnego w twoim kodzie.