TypeError：props.handleToggle不是函数

Question

我在React上编写了我的第一个Todo应用程序。 我收到TypeError：props.handleToggle不是一个函数并且不明白为什么？（另一个处理程序正在工作）。 为什么此功能不能成为功能？ 我在做什么错以及需要阅读什么？

App.js

import React, { Component } from 'react';
import {TodoForm, TodoList} from './components/todo'
import {addTodo, generateId, findById, toggleTodo, updateTodo} from    './lib/todoHelpers'

class App extends Component {
  state = {
    todos: [
      {id: 1, name: 'Hello buddy', isComplete: true},
      {id: 2, name: 'Hello rarrih', isComplete: false}
    ],
    currentTodo: ''
  }

  handleToggle = (id) => {
    const todo = findById(id, this.state.todos)
    const toggled = toggleTodo(todo)
    const updatedTodos = updateTodo(this.state.todos, toggled)
    this.setState({todos: updatedTodos})
  }

  render(){
    const submitHandler = this.state.currentTodo ? this.handleSubmit : this.handleEmptySubmit
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Todo</h1>
        </div>

        <div className="Todo-App">
          {this.state.errorMessage && <span className='error'>{this.state.errorMessage}</span>}
          <TodoForm handleInputChange={this.handleInputChange}
            currentTodo={this.state.currentTodo}
            handleSubmit={submitHandler}/>

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

export default App;

TodoList.js

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.js

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

我收到TypeError：props.handleToggle不是一个函数并且不明白为什么？（另一个处理程序正在工作）。 为什么此功能不能成为功能？ 我在做什么错以及需要阅读什么？

Answer 1

您在TodoList.js中TodoList.js错误，将其传递了道具名称handleToggle ，并尝试使用handleTooggle 。

这是一个正确的变体：

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