javascript - 具有 onClick 事件的 React 函数在控制台中抛出 "TypeError: Cannot read property ' handleDelete' of undefined”

Question

我目前正在尝试从此学习 React Youtube Tuorial然而，它们已经过时了(2016 年制造)。

预期结果

如果我点击<span> x <span> ，浏览器控制台应显示 console.log("helloo")

问题:

我当前的问题是，在我转译我的 react 代码后，chrome 开发人员控制台日志抛出此错误:

这是我的文件树:

这是我的index.js 文件:

import React from 'react';
import ReactDom from 'react-dom';
import TodoItem from './todoItem'; 

class TodoComponent extends React
  .Component {
    constructor(props) {
      super(props);
      this.state = {
        todos: ["clean up", "walk doggo", "take nap"]
      };
    }
    render() {



      return (
      <div>
        <h1>The todo list:</h1>
        <ul>
          <TodoItem todos={this.state.todos}/>
        </ul>
      </div>);
    }

  }

  ReactDom
  .render(<TodoComponent />, document.querySelector(".todo-wrapper"));

还有我的 todoItem.js 文件:

import React from 'react';
import ReactDom from 'react-dom';

export default class TodoItem extends React.Component {

  handleDelete(){
    console.log("Hellooo");
  };

  render() {

    let todos = this.props.todos;

    todos = todos.map(function(item, index) {
      return (
      <li>
        <div className="todo-item">
          <span className="item-name">{item}</span>
          <span className="item-remove" onClick={this.handleDelete}> x </span>
        </div>
      </li>);
    });

    return (<React.Fragment>{todos}</React.Fragment>)
  };
}

我一直在使用 Stackoverflow、reddit 和 Google 来解决这个问题，但出现的大多数结果都解释了为什么“this”不在函数内访问，而是通过在构造函数内绑定(bind)它来解决。但是，我没有在函数中使用任何 this，我只想 console.log("hello") 看看它是否有效。

感谢您的帮助和花费的时间!

Answer 1

我的 friend ，这是因为您传递给 map 的回调没有“绑定(bind)”到您的 TodoItem 类。为什么是这样 ？这是因为您正在向 map 传递一个普通的匿名函数。

改用箭头语法，以便您传递给 .map Array 方法的回调自动绑定(bind)到渲染方法中的 this (该方法已绑定(bind)到您的组件):


todos = todos.map((item, index) => {
return (
<li>
<div className="todo-item">
<span className="item-name">{item}</span>
<span className="item-remove" onClick={this.handleDelete}> x </span>
</div>
</li>);
});


编辑:当您使用 function() { } 语法时，您可以在 map 的回调函数内使用 console.log(this) 来检查 this 是否等于全局对象

更新:

如果您不想使用箭头函数，您可以将 this 放入变量中并从回调中使用它，如下所示:

var myComponent = this;

todos = todos.map(function(item, idx) { /*...*/ onClick= 
{myComponent.handleDelete} }

或者在组件上声明一个方法，绑定(bind)它，并将其作为回调函数传递:

class TodoItem extends ... {
    constructor() {
        super();
        this.renderItem = this.renderItem.bind(this);
    }
    renderItem(item, idx) { /*...*/ }

    render() {
        todos = this.state.todos.map(this.renderItem);
    }