reactjs- 一个自定义函数，它作为 prop 传递到一个组件中，该组件在 map 函数中不起作用

问：

我正在做一个待办事项应用程序，但在 React 中使用类组件，因为我想在 Hooks 之前学习状态逻辑。

我只有一个索引.js文件，所以它并不复杂。

这些是我的包裹：

var React = require("react");
var ReactDOM = require("react-dom/client");

这是我的第一个根组件：

class TodoComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: ["wash up", "eat some cheese", "take a nap", "buy flowers"],
    };
  }

  onDelete(item) {
    var updatedTodos = this.state.todos.filter(function (val, index) {
      return item !== val;
    });

    this.setState({
      todos: updatedTodos,
    });
  }

  render() {
    var todos = this.state.todos;
    todos = todos.map(
      function (item, index) {
        return <TodoItem item={item} key={index} onDelete={this.onDelete} />;
      }.bind(this)
    );

    return (
      <div id="todo-list">
        <p>The busiest people have the most leisure...</p>
        <ul>{todos}</ul>
      </div>
    );
  }
}

这是我的第二个组成部分：

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
  }

  handleDelete() {
    this.props.onDelete(this.props.item);
  }

  render() {
    return (
      <li>
        <div className="todo-item">
          <span className="item-name">{this.props.item}</span>
          <span className="item-delete" onClick={this.handleDelete}>
            {" "}
            x
          </span>
        </div>
      </li>
    );
  }
}

和 createRoot：

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TodoComponent />);

在我想删除列表中的项目之前没有任何问题。当我单击span内的“x”时，它向我显示此错误：

Cannot read properties of undefined (reading 'onDelete')
TypeError: Cannot read properties of undefined (reading 'onDelete')

我本来希望删除该项目。

我已经检查了这个问题：

reactjs - 函数在映射函数中不起作用

但我已经在我的代码中这样做了。

所以我写了

console.log(this.props.onDelete);

进入组件的渲染方法以检查我是否成功将该方法作为属性传递，实际上是的，我正在完美地获得代码。TodoItemonDelete

在这一点上，我找不到任何其他解决方案。我只是猜测发生这种情况是因为我对关键字的范围缺乏了解，或者对在 中使用组件一无所知。thismap function

因为在这里，我的问题看起来有点接近那个链接

reactjs - 函数在映射函数中不起作用

他们通过把

.bind(this)

但它在我的代码上没有奏效，所以我和他的代码之间的唯一区别是我在 map 函数中使用了一个组件，而他只是使用一个标签。li