ReactJS TypeError：无法读取未定义的属性“handleChange”

Question

谁能解释一下为什么我在使用这种语法时会收到错误TypeError: Cannot read property 'handleChange' of undefined

const todoItems = this.state.todos.map(function(item) {
  return (
    <TodoItem
      key={item.id}
      item={item}
      handleChange={this.handleChange}
    />
  );
})

但是当我使用如下所示的箭头指针语法时没有错误

const todoItems = this.state.todos.map(
  item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>
)        

注意：在这两种情况下，我都在constructor() 中使用了this.handleChange = this.handleChange.bind(this)。

Answer 1

区别在于this 是如何与 JS 中的函数一起工作的。这个解释来自this source

在经典函数表达式中，this 关键字根据调用它的上下文绑定到不同的值。然而，对于箭头函数，这是词法绑定的。这意味着它使用了包含箭头函数的代码中的this。

例如看下面的setTimeout函数：

// ES5
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

在 ES5 示例中，需要 .bind(this) 来帮助将 this 上下文传递给函数。否则，默认为undefined。

// ES6
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

ES6 箭头函数不能绑定到 this 关键字，因此它会在词法上上升一个作用域，并在定义它的作用域内使用 this 的值。

Source to explanation

Answer 2

您所指的是箭头函数表达式被引入 Javascript 的确切原因。 在 Javascript 中，每个函数都有一个定义“this”的范围。 这意味着：

function f1() {
   this.name = "John";
   function f2() {
     // here this.name is undefined
     this.name = "Doe"
     // here this.name is "Doe"

   }
   // here this.name "John"
}

您可能想阅读 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 3

你需要将你的map函数绑定到this，否则this是未定义的：

const todoItems = this.state.todos.map(function(item){
    return (
        <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>
    )
}.bind(this))