ReactJS：未捕获的类型错误：this.props.delete 不是函数答案

【问题标题】：ReactJS: Uncaught TypeError: this.props.delete is not a functionReactJS：未捕获的类型错误：this.props.delete 不是函数
【发布时间】：2017-03-15 19:44:19
【问题描述】：

使用 react 的 todo 应用。项目存储在一个数组中。这是我的子组件，它从 ItemList(parent) 呈现数组元素。

import React from 'react';
import './App.css';

class App extends React.Component {

  constructor(){
    super();
    this.onClickfn = this.onClickfn.bind(this);
  }
  componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
    }

  onClickfn(){
    // debugger;
    // self = this;
    this.props.delete();
  }

  render() {
    // debugger;
          var todoEntries = this.props.entries;
          var x=todoEntries.map((i) => {
            // debugger;
              return (
                <div>
                  <span key={i.key}>{i.id} {i.text} <button onClick={this.onClickfn}>x</button></span>
                </div>
                );
          });
          return(
          <div>
            <div>{x}</div>
          </div>
          );
     }
}

export default App;

这是父组件。
从“反应”导入反应；从'./App.js'导入应用程序；

class ItemList extends React.Component{

    constructor(){
        super();
        this.state = {
            ItemsArray : [ { /*active : '',*/ id : 1} ]
        };
    }

    componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
    }

    componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
    }

    clickHandler(e){
        // debugger;
        var n=0;
        var items = this.state.ItemsArray;
        var id = items[n].id++;
        items.push(
            {
                // active : 'X',
                id : id,
                text : this._inputElement.value,
                key : Date.now()
            }
        );

        this.setState( {ItemsArray:items} );

        this._inputElement.value='';
        e.preventDefault();
    }

    delete(id){
        debugger;
        this.state.ItemsArray.splice(id,1);
        this.setState(ItemsArray:ItemsArray);
    }

    render(){
        return (
            <div>
                <form onSubmit={this.clickHandler.bind(this)}>
                    <input type='text' placeholder='enter task' ref={(a) => this._inputElement = a}/>
                    <button type='submit'>Add</button>
                </form>
                <div>
                    <App entries={this.state.ItemsArray}/>
                </div>
            </div>
            );
    }
}
export default ItemList;

【问题讨论】：

标签： reactjs

【解决方案1】：

将删除功能传递给 App：

<App entries={this.state.ItemsArray} deleteFunc={this.delete.bind(this)} />

在你输出列表的App中，调用带有id参数的函数

<span key={i.key}>{i.id} {i.text} <button onClick={() => { this.props.deleteFunc(i.id) }}

最后，在你的删除函数中，不要使用拼接。相反，过滤数组并设置状态：

delete(id){
  this.setState({
    ItemsArray: this.state.ItemsArray.filter((x) => x.id != id )
  });
}

【讨论】：

【解决方案2】：

您需要在 App 组件中将 delete 函数作为 props 传递

<div>
  <App entries={this.state.ItemsArray} delete={this.delete.bind(this)}/>
</div>

【讨论】：