Reagire: questo stato scompare nel ciclo for

Question

Come posso trasportare this nel mio ciclo .map()? Sembra scomparire. :-(

Sto creando una "forma dinamica", dove l'utente può specificare più righe di input per la sua forma. Voglio iterare su tutti gli elementi in state.items[] e costruire campi di input del modulo per loro.

ad esempio, il modulo inizia con 'campo' e 'autocomplete_from. l'utente può quindi fare clic su aggiungere una nuova linea di per ottenere più righe nella sua forma.

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 .mapquesto non si riferisce al componente. , ci sono diversi modi in cui tu in grado di risolvere questo problema

1. Salva this alla variabile

   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. Set this per .map callback (se non è possibile utilizzare ES2015 caratteristiche, questa variante è preferito)

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

3. utilizzare arrow function

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

4. uso .bind

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

Answer 2

secondo argomento per il metodo iterativo come map e filter è this oggetto

in modo da poter usare come segue:

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

Answer 3

Quando si chiama una funzione. Questo è impostato sull'oggetto globale a meno che non si tratti di un metodo membro che si sta invocando o si sta invocando con .call o .apply che non è possibile nel proprio caso.

o in altre parole non è possibile chiudere oltre this è comunque possibile avvicinarsi a una variabile standard a cui è stato assegnato questo. Quindi, in generale, se avete una funzione nidificato all'interno di un altro funtion e si desidera refere a questo do:

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

Answer 4

Se stai usando Babel o nell'altro EcmaScript6- moderna> JS5 compilatore, è possibile utilizzare una sintassi più semplice per preservando contesto del contesto esterno:

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

utilizzando la sintassi della funzione freccia, il contesto this viene automaticamente associato all'interno della funzione contenuta, in modo da poter utilizzare this come già eri e non è necessario fare qualcosa di speciale nel tuo codice.