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

Question

有人可以解释为什么我得到一个错误类型错误：无法读取属性“handleChange”的未定义，当我使用此语法

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

注意：在这两种情况下，我都使用过 this.handleChange = this.handleChange.bind（this） 在构造函数（） 内。

Answer 1

不同之处在于this如何与JS中的函数一起工作。这个解释来自这个来源

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

例如，请看下面的setTimeout函数：

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

在ES5示例中，需要使用.bind（this）来帮助将此上下文传递到函数中。否则，默认情况下，这将是未定义的。

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

ES6箭头函数不能绑定到this关键字，因此它将按词法向上移动一个范围，并在定义它的范围中使用this的值。

解释的来源

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 函数绑定到此函数，否则这是未定义的：

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