javascript - TypeError : this. props.* 不是一个函数(即使有绑定(bind))

Question

我不断收到以下错误:

TypeError: this.props.onDelete is not a function

我在 render() 中的函数上有 .bind(this) ，但这个错误似乎不断发生，我不知道为什么。相关代码如下:

App.js

import React, {Component} from 'react';
import Todos from './Components/Todos';

class App extends Component {

  deleteTodo(id) {
    let todos = this.state.todos;

    for (let i = 0; i < todos.length; i++) {
      if (todos[i].id === id) {
        todos.splice(i, 1);
        break;
      }
    }

    this.state.todos = todos;
  }

  render() {


    return (<div className="App">
      <h1>React Todo App</h1>

      <AddTodo/>
      <Todos todos={this.state.todos} onDelete={this.deleteTodo.bind(this)}/>
    </div>);
  }
}

export default App;

Todos.js

import React, {Component} from 'react';
import Todo from './Todo';

class Todos extends Component {

  delete(id) {
    this.props.onDelete(id);
  }

  render() {

    let todoItems = '';

    if (this.props.todos) {

      todoItems = this.props.todos.map(todo => {
        return (<Todo id={todo.id} name={todo.name})></Todo>)
      });
    }

    return (<ul class="todos" onDelete={this.props.onDelete.bind(this)}>{todoItems}</ul>);
  }
}

export default Todos;

Todo.js

import React, {Component} from 'react';

class Todo extends Component {

  delete(id) {
    this.props.onDelete(id);
  }

  render() {
    return (<li class="todo" id={this.props.id}>{this.props.name}
      <a onClick={this.delete.bind(this, this.props.id)} class='remove-button' href='#'>X</a>
    </li>)
  }

}

export default Todo;

错误似乎发生在以下代码片段中的 Todo.js 处:

delete(id) {
    this.props.onDelete(id)    // Error
}

编辑:添加了更多上下文代码

Answer 1

通过编写 this.delete(this.props.id).bind(this) 您正在调用 this.delete 函数，而不是给出 onClick 函数引用。

你可以这样写:

onClick={this.delete.bind(this, this.props.id)}

或者使用箭头函数:

onClick={() => this.delete(this.props.id)}