TypeError：这是未定义的；无法访问其“ props”属性

Question

我的待办事项应用程序是这样...并且..我正尝试从列表中删除特定的待办事项。我从子组件中调用一个函数，并通过另一个函数作为道具。问题是，每当我在子组件中调用该函数时，它都无法访问也是一个函数的父组件中的道具。我尝试对父组件中调用的地图函数进行“ 绑定”。但是仍然徒劳。 我该如何解决？还是有什么更好的方法来删除待办事项？需要帮忙！ 预先感谢！

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();
   }
 }

Answer 1

您必须使用箭头功能

handleClick = () => {

或者，如果您不能使用它， 在方法所在的类中定义一个构造函数，然后在其中定义： this.handleClick().bind(this)

这样，您所指的this和该方法所指的this是相同的。可以说这是您和方法之间的沟通不畅：）