Javascript TypeError：这是未定义的；can'；t访问它的"；道具；财产

我的待办事项应用程序是这样的…并且..我正在尝试从列表中删除特定的待办事项。我从子组件调用一个函数，并将另一个函数作为道具传递。问题是，每当我调用子组件中的函数时，它都无法访问父组件中的道具，父组件也是一个函数。我尝试了使用父组件中调用的map函数进行绑定。但还是徒劳。 我如何解决这个问题，或者有没有更好的方法删除待办事项？？需要帮助！ 提前谢谢

class Todo extends Component {

//initializing state
constructor(props) {
super(props);
this.state = {
  todoList: ['wash clothes', 'water the garden', 'buy some flowers', 'something else!']
 }
}

//rendering and cycling through the data (toodoList)
render() {
var todoList = this.state.todoList;
todoList = todoList.map(function(item, index) {
  return(
    <TodoItem item={item} onDelete={this.handleClick.bind(this)} key={index} />
  );
}, this);

return(
  <div className="component-body">
    <AddItem />
    <ul>
      {todoList}
    </ul>
  </div>
);
  }

  //removing item
 handleClick(item) {
    var updatedList = this.state.todoList.filter(function(val, index){
  return item !== val;
});
this.setState= {
  todoList: updatedList
  }
}
 }
class TodoItem extends Component {
 render() {
  return(
    <li>
     <div>
       <span> {this.props.item} </span>
       <span className="handle-delete" onClick={this.handleClick}> x </span>
     </div>
   </li>
       );
     }
 //Custom function
    handleClick() {
      this.props.onDelete();
   }
 }

类Todo扩展组件{
//初始化状态
建造师（道具）{
超级（道具）；
此.state={
托多利斯特：[“洗衣服”、“浇灌花园”、“买些花”、“做点别的！”]
}
}
//在数据中渲染和循环（toodoList）
render（）{
var todoList=this.state.todoList；
todoList=todoList.map（函数（项、索引）{
返回(
);
}，这个）；
返回(

{托多利斯特}

);
}
//删除项目
把手舔（项目）{
var updatedList=this.state.todoList.filter（函数（val，索引）{
退货项目！==val；
});
此.setState={
todoList:updatedList
}
}
}
类TodoItem扩展了组件{
render（）{
返回(

{this.props.item}
x

);
}
//自定义函数
handleClick（）{
this.props.onDelete（）；
}
}

您必须使用箭头功能

handleClick=（）=>{

或者如果你不能使用它， 在方法所在的类中定义构造函数，然后在其内部：

this.handleClick（）.bind（this）

---

这样，您所引用的

This

和方法所引用的

This

都是相同的。假设您和方法之间存在通信错误：）

如上所述的可能重复项，您必须绑定或使用箭头函数。但我不认为您将项传递到实际的删除方法中。因此，这不会删除如果你不解决这个问题，它会将项目作为参数，并且必须知道要删除的项目，所以你也必须传递它。