React Todo应用报错TypeError: props.handleToggle is not a function求助

看起来你遇到的问题大概率是函数没定义、没传递，或者传递/调用时名字写错了，结合你的代码片段和React组件的常见坑，我给你梳理几个排查方向：

1. 先确认App组件里是否定义了handleToggle方法 #

从你贴的代码里看不到这个方法的定义——其他处理函数（比如添加todo的）能正常运行，说明你肯定写了对应的handleAdd之类的方法，但handleToggle大概率漏掉了。你需要基于toggleTodo工具函数，在App组件里定义这个处理函数，比如：

handleToggle = (todoId) => {
  const targetTodo = findById(todoId, this.state.todos);
  const updatedTodo = toggleTodo(targetTodo);
  const updatedTodos = updateTodo(this.state.todos, updatedTodo);
  this.setState({ todos: updatedTodos });
};

这个方法的作用是接收todo的id，找到对应的项，调用工具函数切换完成状态，最后更新state。

2. 检查是否给子组件正确传递了handleToggle #

定义好方法后，还要确保在渲染子组件（比如TodoList或者TodoItem）的时候，把这个函数作为props传进去。比如如果是给TodoList传，要写成：

<TodoList todos={this.state.todos} handleToggle={this.handleToggle} />

如果你漏传了这个props，或者传递的名字不对（比如写成toggle={this.handleToggle}但子组件里用的是props.handleToggle），就会出现is not a function的错误。

3. 核对子组件里的调用拼写 #

最后检查子组件（比如单个Todo项组件）里的调用是否拼写正确，比如是不是不小心写成了handleTogle（少了个g）？不过你说其他函数正常，这个概率相对低，但也别忽略细节。

需要查阅的资料 #

• React官方文档中组件props传递的章节，重点看如何传递函数类型的props，理解父组件向子组件传递行为的逻辑。
• React类组件的方法绑定内容，如果你不用箭头函数定义类方法，要知道怎么通过构造函数或者箭头函数绑定this，避免函数调用时this指向错误。
• 你自己项目里的todoHelpers.js，再确认toggleTodo和updateTodo的参数要求，确保在handleToggle里调用它们的方式是正确的。

内容的提问来源于stack exchange，提问作者slow rarrih