时间戳

首页 > 解决方案 > TypeError: this.props.* 不是函数（即使有绑定）

javascript - TypeError: this.props.* 不是函数（即使有绑定）

问题描述

我不断收到以下错误：

TypeError：this.props.onDelete 不是函数

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

应用程序.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
}

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

标签： javascriptreactjsreact-props

解决方案

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

你可以这样写：

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

或者使用箭头函数：

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

推荐阅读