Tepki: this.state döngü için kayboluyor

Question

benim .map() döngüsüme nasıl taşıyabilirim? Ortadan kayboluyor gibi görünüyor. :-(

Ben kullanıcının kendi form için giriş birden fazla satır belirtebilirsiniz "dinamik formu" yaratıyorum

. Ben state.items[] tüm öğeleri üzerinde yineleme ve onlar için form giriş alanları kurmak istiyoruz.

örneğin formu 'alanına' ve 'autocomplete_from ile başlar. kullanıcı daha sonra onun formda daha fazla satır almak için yeni bir satır eklemek tıklayabilirsiniz.

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

bu.map yılında da bileşeni ifade etmez. , nasıl yapılacağını birkaç yol var Bu sorunu .map geri arama için this Set değişken

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

için

1. kaydet this çözebilir

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

(eğer ES2015 özelliklerini kullanamıyorsanız , bu varyant tercih edilir)

2. arrow function

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

3. kullanımı .bind

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

map ve filter aşağıdaki gibi this nesne

böylece kullanmak için olan gibi tekrarlamalı yöntemi için

Answer 2

ikinci argüman:

Bir işlevi çağırdığınızda,

Answer 3

. Bu, çağırıyor olduğunuz bir üye yöntemi olmadıkça veya .call veya .apply ile davrandığınız durumda olmadığınız sürece genel nesneye ayarlanır.

veya başka bir deyişle, this'u kapatamazsınız, ancak bunu atadığınız standart bir değişkene daha yakın olabilirsiniz. Yani genel olarak bir işlev başka fonksiyonun içinde yuvalanmış olan ve bu do refere isterseniz: Eğer Babel veya başka bir modern EcmaScript6- kullanıyorsanız

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

Answer 4

> JS5 derleyici, sizin için daha basit bir sözdizimi kullanabilirsiniz dış bağlamda bağlamını koruyarak: zaten gibi sen this kullanabilirsiniz ve yapmanız gerekmez ok fonksiyonu sözdizimi kullanarak

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

, this bağlam içeriyordu işlev içinde otomatik olarak bağlanır Kodunda özel bir şey var.