Javascript TypeError:无法读取属性'；handleChange'；未定义的

我正在尝试使用React构建一个待办事项列表应用程序。获取错误“无法读取未定义的handleChange属性”。下面是我正在处理的代码。此外，todosData是一个对象数组，其属性为id、text和completed（boolean-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;

---

因为

此

是函数范围，箭头函数除外

const todoComponents=this.state.todos.map（任务=>(
))

或者，如果必须使用

功能

const=this；
const todoComponents=this.state.todos.map（函数（任务）(
));

---

另请参见

这是否回答了您的问题？

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;

    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;