我在 React 上编写了我的第一个 Todo 应用程序。 我得到TypeError: props.handleToggle is not a function 不明白为什么?(另一个处理程序正在工作)。 为什么这个函数不能是一个函数?我做错了什么以及我需要阅读什么?
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不是一个函数 不明白为什么?(另一个处理程序正在工作)。 为什么这个函数不能是一个函数?我做错了什么以及我需要阅读什么?
最佳答案
您在 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>
)
}
关于javascript - TypeError : props. handleToggle 不是一个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50064838/