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

Примечание: я использовал this.handleChange = this.handleChange.bind(this) внутри constructor() в обоих случаях.

Answer 1

То, что вы имеете в виду, является точной причиной, по которой выражения функций стрелок были введены в Javascript. В Javascript каждая функция имеет область действия, в которой определено «это». Это означает, что:

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 2

Разница в том, как this работает с функциями в JS. Это объяснение взято из этого источника

В выражениях функций classi c ключевое слово this связано с различными значениями в зависимости от контекста, в котором оно вызывается. Однако с функциями стрелок это связано с лексикой. Это означает, что он использует это из кода, который содержит функцию стрелки.

Например, посмотрите на функцию setTimeout ниже:

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

В примере ES5 .bind (this) требуется, чтобы помочь передать этот контекст в функцию. В противном случае по умолчанию это будет undefined.

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

Функции стрелки ES6 не могут быть привязаны к ключевому слову this, поэтому он будет go расширять область видимости и использовать значение этого в объеме, в котором оно было определено.

Источник к объяснению

Answer 3

Вам необходимо привязать функцию карты к this, в противном случае this не определено:

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