Javascript TypeError:props.handleToggle不是函数

我在React上编写了我的第一个Todo应用程序。 我得到TypeError:props.handleToggle不是一个函数 不明白为什么？（另一个处理程序正在工作）。 为什么这个函数不能是函数？我做错了什么，我需要读什么

App.js

import React，{Component}来自'React'；
从“./components/todo”导入{TodoForm，TodoList}
从“/lib/todoHelpers”导入{addTodo、generateId、findById、toggleTodo、updateTodo}
类应用程序扩展组件{
状态={
待办事项：[
{id:1，name:'Hello buddy'，isComplete:true}，
{id:2，名称：'Hello rarrih'，isComplete:false}
],
当前待办事项：“”
}
handleToggle=（id）=>{
const todo=findById（id，this.state.todos）
const toggled=toggleTodo（todo）
const updatedTodos=updateTodo（this.state.todos，已切换）
this.setState（{todos:updatedTodos}）
}
render（）{
const submitHandler=this.state.currentTodo？this.handleSubmit:this.handleEmptySubmit
返回(
待办事项
{this.state.errorMessage&&{this.state.errorMessage}
);
}
}
导出默认应用程序；

TodoList.js

从“React”导入React
从“/TodoItem”导入{TodoItem}
从“道具类型”导入道具类型
导出常量TodoList=（道具）=>{
返回(

{props.todos.map（todo=>）}

)
}

TodoItem.js

//TodoItem
导出常量TodoItem=（道具）=>{
const handleToggle=props.handleToggle（props.id）
返回(

{props.name}

)
} 

我得到TypeError:props.handleToggle不是一个函数 不明白为什么？（另一个处理程序正在工作）。

---

为什么这个函数不能是函数？我做错了什么，我需要读什么

您在

TodoList.js

中出错，您将其传递给prop name

handleToggle

，并尝试使用

handleToggle

这是一个正确的变体：

export const TodoList = (props) => {
  return (
    <div className="Todo=List">
      <ul>
        {props.todos.map(todo => <TodoItem handleToggle={props.handleToggle} key={todo.id} {...todo}/>)}
      </ul>
    </div>
  )
}

export const TodoList=（道具）=>{
返回(

{props.todos.map（todo=>）}

)
}

拼写错误

handleToggle={props.handleToggle}

？

import React from 'react'
import {TodoItem} from './TodoItem'
import PropTypes from 'prop-types'

export const TodoList = (props) => {
  return (
    <div className="Todo=List">
      <ul>
        {props.todos.map(todo => <TodoItem handleToggle={props.handleTooggle} key={todo.id} {...todo}/>)}
      </ul>
    </div>
  )
}

//TodoItem
export const TodoItem = (props) => {
  const handleToggle = props.handleToggle(props.id)
  return (
    <li>
      <input type="checkbox" onChange={handleToggle}
       checked={props.isComplete}/> {props.name}
    </li>
  )
} 

export const TodoList = (props) => {
  return (
    <div className="Todo=List">
      <ul>
        {props.todos.map(todo => <TodoItem handleToggle={props.handleToggle} key={todo.id} {...todo}/>)}
      </ul>
    </div>
  )
}