React传函数报错TypeError: this.props.deleteItem is not a function如何解决

你在Todo组件向ListItems组件传递deleteItem属性时，错误地从this.state对象中取值。deleteItem是你直接定义在Todo类上的实例箭头函数，并没有存储在组件的state中，因此this.state.deleteItem的值为undefined，子组件拿到这个值尝试调用时，就会抛出「不是函数」的类型错误。

只需要修改Todo组件中传递deleteItem属性的代码，将this.state.deleteItem替换为this.deleteItem即可：
修改前的错误代码：

<ListItems
  items={this.state.todoList}
  deleteItem={this.state.deleteItem}
></ListItems>

修改后的正确代码：

<ListItems
  items={this.state.todoList}
  deleteItem={this.deleteItem}
></ListItems>

修改完成后，传递给子组件的就是正确的函数引用，调用时不会再报错。

内容的提问来源于stack exchange，提问作者Menna T-Allah Magdy