Uncaught TypeError: Невозможно прочитать свойство 'функция класса' из неопределенного в реакции.

Question

Ошибка: Uncaught TypeError: Невозможно прочитать свойство 'manageChange' из неопределенного

Я также связал метод с "this".Я даже попробовал формат функции стрелки, чтобы определить "manageChange".Это все еще не работает.

Пожалуйста, помогите с выявлением проблемы?Код:

 class App extends React.Component {
  constructor() {
    super();
    this.state = { todos: TodoData };
    this.manageChange = this.manageChange.bind(this);
  }

  manageChange(id) {
    console.log(id);
  }

  render() {
    const todoItems = this.state.todos.map(function (item) {
      return (<TodoItem key={item.id} items={item}
        handleChange={this.manageChange} />);
    }
    );
    return
    (
      <div className="app">
        {todoItems}
      </div>
    );
  }
}

Answer 1

Ошибка не в определении вашей manageChange функции.Вместо этого он находится в приведенном ниже коде

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

Вы должны изменить его на ниже и использовать вместо него функцию arrow, например:

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

Обратите внимание на разницу в arrow function и normal function.Ссылка в функциях стрелки передается дочерним элементам.

Так что, когда вы определяете это так;Ключевое слово this передается в this.manageChange как ссылка на класс и не является неопределенным.

Answer 2

Проблема с функцией карты.использовать функцию стрелки на карте.если вы используете обычную функцию, она будет иметь свою собственную функцию, которая не будет иметь функцию manageChange.

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