无法读取的属性

Question

我正在学习React，但我想创建一个todoaapp，但我只使用一个组件来处理道具。我已经在dom中打印了任务，但是现在我想创建一个事件来更改任务状态以完成，但是我遇到了这个问题。 enter image description here

这是我的代码。

import React, { Component } from 'react';


class App extends Component {
  constructor() {
    super();
    this.state = {
      name: [],
      id: "",
      isCompleted: false
    };

    this.createTask = this.createTask.bind(this);
    this.completeTask = this.completeTask.bind(this);
  }

  createTask(event){
    event.preventDefault();

    this.setState({
      name: this.state.name.concat([event.target.task.value]),
      id: event.target.task.value
    })
    console.log(this.state.id)
  }

  completeTask(event){
    event.preventDefault();
  }


  render(){

    var today = new Date();

    return(
      <div className="todoapp--container">
        <div className="filters">
          <input type="search" placeholder="Search" />
          <button>All tasks</button>
          <button>Complete</button>
          <button>Incomplete</button>
          <button><i className="fas fa-plus"></i>New Task</button>
        </div>
        <div className="main">
          <div className="search-task">
            <form onSubmit={this.createTask}>
              <input className="main-search" name="task" type="search" placeholder="Task" />
              <input type="submit" value="Submit" />
            </form>
          </div>
          <div className="dates">
            <h1>Today</h1>
            <p>{today.toString()}</p>
          </div>
          <div className="tasks">
            <h3>Tasks</h3>
            <ul>
              {this.state.name.map(function(task){
                return(
                  <label className="label--task">
                  <input  type="checkbox" onClick={this.completeTask}/>
                  <li id={task}>{task}</li>
                  </label>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

export default App;