未捕获类型错误:this.props.onDelete不是函数reactjs

Uncaught TypeError: this.props.onDelete is not a function reactjs

本文关键字：onDelete 函数 reactjs props this 类型错误更新时间：2023-09-26

当我试图删除待办事项列表时，问题就会出现，onDelete不是一个函数。这里有完整的代码。感谢

var TodoList = React.createClass({
    onDelete : function(key){
        console.log('remove here');
    },
    render: function() {
        var createItem = function(itemText,i) {
            return (
                <TodoListItem onDelete={this.remove} index={i} key=
                    {i}>{itemText}
                </TodoListItem>
            );
        };
        return(
            <ul id="staggered-test" className="collection with-
            header">
                <li className="collection-header">
                    <h4>todo list</h4>
                    {this.props.items.map(createItem)}
                </li>
            </ul>
      )
   }
});


var TodoListItem = React.createClass({
    remove : function(key){
        console.log('test:',key);
        console.log('that.props',this);
        this.props.onDelete();
    },
    render : function(){
        return(
            <li className="collection-item">
                <div>{this.props.children}
                    <a onClick=
                    {this.remove.bind(this,this.props.index)} href="#" className="secondary-content"><i className="material-icons">delete</i>
                    </a>
                </div>
            </li>
        )
    }
});

问题来自行

onDelete={this.remove}

未定义此删除函数。在onDelete中，您的wnat有什么要做的吗？如果没有，您可以删除this.props.onDelete();

问题来自这一行

onDelete＝｛this.remove｝

更改为

onDelete＝｛this.onDelete｝

所做的更改是{this.props.items.map(createItem)}到{this.props.items.map(createItem,this)}

var TodoList = React.createClass({
    remove : function(index){
        console.log('remove from here:',this.props.items);
        console.log('index:',index);
    },
    render: function() {
        var createItem = function(itemText,i) {
            return (
                <TodoListItem onDelete={this.remove.bind(this,i)} index={i} key={i}>{itemText}
                </TodoListItem>
            );
        };
        return(
            <ul id="staggered-test" className="collection 
                with-header">
                <li className="collection-header">
                    <h4>todo list</h4>
                    {this.props.items.map(createItem,this)}
                </li>
            </ul>
        )
    }
});

类TodoListItem中不需要函数remove，因为父级具有该函数，因此它可以通过props。

var TodoListItem = React.createClass({
    render : function(){
        return(
            <li className="collection-item">
                <div>{this.props.children}
                    <a onClick={this.props.onDelete} href="#" 
                    className="secondary-content">
                        <i className="material-icons">delete</i>
                    </a>
                </div>
            </li>
        )
    }
});