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

Question

如何将 this 带入我的 .map() 循环？它似乎消失了。 :-(

我正在创建一个 "dynamic form"，用户可以在其中为其表单指定多行输入。我想遍历 state.items[] 中的所有项目并为它们构建表单输入字段。

例如，表单以 'field' 和 'autocomplete_from 开头。然后，用户可以单击 添加新行 以在其表单中获取更多行。

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

在 .map this 没有引用您的组件。，有几种方法可以解决这个问题

保存this到变量

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

为.map回调设置this（如果您不能使用ES2015功能，首选此变体)
```
this.state.items.map(function (object, i) {
   // ....
}, this);
```

使用arrow function

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

使用.bind

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

Answer 2

map 和 filter 等迭代方法的第二个参数是 this 对象

因此您可以按如下方式使用它：

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

Answer 3

调用函数时。这被设置为全局对象，除非它是您正在调用的成员方法，或者您正在使用 .call 或 .apply 调用，在您的情况下您不能。

或者换句话说，你不能关闭 this 但是你可以关闭你分配给它的标准变量。所以一般来说，如果你有一个嵌套在另一个函数中的函数并且你希望参考这个做：

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

Answer 4

如果您正在使用 Babel 或其他现代 EcmaScript6->JS5 编译器，您可以使用更简单的语法来保留外部上下文的上下文：

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

通过使用箭头函数语法，this 上下文自动绑定到包含的函数中，因此您可以像以前一样使用 this，不需要做任何特殊的事情在你的代码中。

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

React: this.state disappears in for loop

javascript

reactjs