问题遇到的现象和发生背景
我想通过点击【清除已完成任务】的按钮将已经勾选的任务项取消掉，但是我点击了以后他只修改了已完成的任务项数字，但没有彻底删除已经勾选的任务项目
用代码块功能插入代码，请勿粘贴截图
App组件中（我已经将这个组件里面的方法传入到了清除组件按钮中）
// 清除所有已完成的任务
clearCompleted = () =>{
// 获取所有任务的完成
const {todos} = this.state
const newTodos = todos.filter((t)=>{
return !t.completed
// return t.completed === false
})
this.setState({todos:newTodos})
console.log(todos)
}
清除按钮组件中
deleteCompletedTodos = ()=>{
// const {todos} = this.props
this.props.checkedAll()
// console.log(todos)
}
render() {
const {todos} = this.props
const allTodos = todos.length;
// const completedTodos = todos.reduce((preValue,current)=>{return preValue+(current.completed ? 1:0),0})
const newTodos = todos.filter((t)=>{return t.completed === true})
const completedTodos = newTodos.length
return (
<div className="todo-footer">
<label>
<input type="checkbox" checked={completedTodos===allTodos ? true:false } onChange={this.handlecheckedAll} />
</label>
<span>
<span>已完成{completedTodos}</span> / 全部{allTodos}
</span>
<button className="btn btn-danger" onClick={this.deleteCompletedTodos}>清除已完成任务</button>
</div>
)
}
运行结果及报错内容
Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
我的解答思路和尝试过的方法
我使用了数组的filter方法，想过滤掉已经完成的任务项，并且将未完成的传到新的数组中，将新数组赋值给旧数组，这样数组中就没有已完成的任务了
我想要达到的结果
改变已完成项目的同时删除掉已完成项目
