我正在收到TypeError：即使在构造函数中使用this.handleChange = this.handleChange.bind（this），也无法定义

Question

即使将其绑定到构造函数中的函数，也收到“ TypeError：这是未定义的”错误。我也尝试使用handleChange={this.handlChange.bind(this)}代替this.handleChange = this.handleChange.bind(this)，但是它不起作用。我正在观看React教程，并且编写了与导师相同的代码，该代码在他的IDE中可以正常工作，但在我的代码中却显示错误。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React from 'react';
import './css/App.css';
import Header from "./components/Header"
import MainContent from "./components/MainContent"
import Footer from "./components/Footer"

class App extends React.Component {

  render(){
      return (

        <div>
          <Header />
          <MainContent />

          <Footer />
        </div>
    )
  }
}

export default App;

MainContent.js

import React, {Component} from "react"
import ListItem from "./ListItem"
import tasks from "./tasks"

class MainContent extends Component
{
    constructor()
    {
        super()
        this.state = 
        {
            tasks: tasks
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(completed)
    {
        alert(completed)
    }

    render() 
    {
            const taskComponents = this.state.tasks.map(function(data)
            {
                return <ListItem key={data.id} task={data.task} completed={data.completed} handleChange={this.handleChange} />
            })
            return (
            <div>
                {taskComponents}
            </div>
            )
        }   
}

ListItem.js

import React from "react"
let i=1;

class ListItem extends React.Component
{

    render()
    {
        return (
            <div>
                <p style={{color : i%2 ? "black" : "orange"}}>
                    <input type="checkbox" checked={this.props.completed} 
                        onChange={function(){
                            this.props.handleChange(this.props.completed)
                        }}>
                    </input> Task {i++} : <b>{this.props.task}</b> 
                </p>
            </div>
            )
    }
}

export default ListItem