反应：简单的待办事项应用程序，复选框未更新

Question

Working on a simple React project for learning purposes. I've been able to get everything functioning so far except for the checked box is not updating when it is clicked. The state of the app doesn't seem to update. Any help is appreciated!Thank you!

 import React from 'react';
let id = 0
const Todo = props => ( 
  <li>
    <input type="checkbox" checked={props.todo.checked} onChange={props.onToggle} />
    <button onClick = {props.onDelete}> delete</button>
    <span>{props.todo.text}</span> 
  </li>
)

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      todos: [],
    }
  }
    addTodo() {
      const text = prompt("TODO TEXT PLEASE!")
      this.setState({
        todos: [...this.state.todos, {id: id++, text: text, checked: false},
        ]
      })
    }

    toggleTodo(id) {
      this.setstate({
        todos: this.state.todos.map(todo => {
          if (todo.id !== id) return todo
          return {
            id: todo.id,
            text: todo.text,
            checked: !todo.checked,
          }
        })

      })
    }

  render() {
    return (
      <div>
       <div> Todo Count: {this.state.todos.length}</div>
      <div> Unchecked Count: {this.state.todos.filter(todo => !todo.checked).length} </div>
     
      <button onClick={() => this.addTodo()}> Add TODO </button>
        <ul>
          {this.state.todos.map(todo => (
             <Todo
             onToggle={() => this.toggleTodo(todo.id)}
              onDelete={() => this.removeTodo(todo.id)}
              todo={todo}    
              />
              ))}
        </ul>
      </div>
    )
  }     
   
}

export default App;

Answer 1

You have a typo error just change this.setstate to this.setState

toggleTodo(id) {
      this.setState({
        todos: this.state.todos.map(todo => {
          if (todo.id !== id) return todo
          return {
            id: todo.id,
            text: todo.text,
            checked: !todo.checked,
          }
        })

      })
    }