React：this.state在for循环中消失

Question

How can I carry this into my .map() loop? It seems to disappear. :-(

I'm creating a "dynamic form" where the user can specify multiple lines of input for his form. I want to iterate over all items in state.items[] and build form input fields for them.

Eg the form starts with 'field' and 'autocomplete_from. The user can then click add a new line to get more rows in his form.

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 .map this does not refer to your component., there are several ways how you can solve this issue

1. Save this to 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> ); } 

2. Set this for .map callback( if you can't use ES2015 features, this variant is prefered )

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

3. use arrow function

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

4. use .bind

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

Answer 2

second argument for iterative method such as map and filter is this object

so you can use it as follows:

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

Answer 3

When you call a function. This is set to the global object unless it's a member method you are invoking or you are invoking with either .call or .apply which you can't in your case.

or in other words you can't close over this you can however closer over a standard variable to which you have assigned this. So in general if you have a function nested inside another funtion and you wish to refere to this do:

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

Answer 4

If you're using Babel or another modern EcmaScript6->JS5 compiler, you can use a simpler syntax for preserving the context of the outer context:

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

By using the arrow function syntax, the this context is bound automatically within the contained function, so you can use this as you already were and you don't need to do anything special in your code.