TypeError: невозможно прочитать свойство handleChange неопределенного значения.

Question

Я пытаюсь создать приложение со списком задач с помощью React. Получение ошибки «Невозможно прочитать свойство handleChange undefined». Ниже приведен код, над которым я работаю. Более того, todosData - это массив объектов, имеющих идентификатор, текст и завершенный (логический - true / false) в качестве свойств.

    import React from "react";
    import './App.css'; 
    import List from './Components/Todo-Startup/content';
    import todosData from './Components/Todo-Startup/todosData';

    class App extends React.Component {

         constructor(){
            super()
              this.state = {
              todos: todosData
          }
          this.handleChange = this.handleChange.bind(this)
  }

    handleChange(id){
         console.log("Changed", id)
    
  }

    render() {
         const todoComponents = this.state.todos.map(function(task){
             return (
               <List key={task.id} 
                  task={task} 
                  handleChange={this.handleChange} />
      )
    })

  return (
    <div className = "App">
      {todoComponents}
    </div>
  )
 }
 }

   export default App;

Content. js выглядит следующим образом:

import React from 'react';

const List = function (props){
    return (
        <div className="todo-list">
            <input 
                onChange={function(){props.handleChange(props.task.id)
            }}  
                type="checkbox" 
                checked={props.task.completed}/> 
                <p>{props.task.text}</p>
        </div>

    );
}

export default List;

И, наконец, массив todosData,

    const todosData = [
    {
        id: 1,
        text: "Take out the trash",
        completed: true
    },
    {
        id: 2,
        text: "Grocery Shopping",
        completed: false
    },
    {
        id: 3,
        text: "Get a hair cut",
        completed: true
    },
    {
        id: 4,
        text: "Study & Practice JavaScript",
        completed: true
    }
    
]

export default todosData;

Answer 1

Потому что this имеет функциональную область, за исключением стрелочных функций.

const todoComponents = this.state.todos.map(task => (
    <List key={task.id} 
          task={task} 
          handleChange={this.handleChange} />
))

Альтернатива, если вам нужно использовать function.

const that = this;
const todoComponents = this.state.todos.map(function (task) (
    <List key={task.id} 
          task={task} 
          handleChange={that.handleChange} />
));

См. Также Как получить доступ к правильному `this` внутри обратного вызова?