React简易Todo App复选框点击后勾选状态不更新问题

你的复选框点击后不更新的核心原因是API拼写错误：

• React类组件触发状态更新的方法是驼峰命名的setState，你在toggleTodo方法中写的是全小写开头的this.setstate，这个方法不存在，点击复选框时状态更新逻辑根本没有执行，自然不会触发组件重渲染、勾选状态也不会变化。
• 额外注意：你在渲染Todo列表时给删除按钮绑定了this.removeTodo方法，但当前App组件中没有定义这个方法，后续点击删除按钮会直接报错，需要补充实现。

1. 把toggleTodo方法里的this.setstate改成this.setState即可解决复选框不更新的问题，优化后可以用对象展开运算符简化返回的todo对象写法，不用重复写已有的属性：

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

2. 补充缺失的removeTodo方法实现，避免删除按钮报错：

removeTodo(id) {
  this.setState({
    todos: this.state.todos.filter(todo => todo.id !== id)
  })
}

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