我想通过点击【清除已完成任务】的按钮将已经勾选的任务项取消掉，但是我点击了以后他只修改了已完成的任务项数字，但没有彻底删除已经勾选的任务项目

问题遇到的现象和发生背景

我想通过点击【清除已完成任务】的按钮将已经勾选的任务项取消掉，但是我点击了以后他只修改了已完成的任务项数字，但没有彻底删除已经勾选的任务项目

用代码块功能插入代码，请勿粘贴截图

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方法，想过滤掉已经完成的任务项，并且将未完成的传到新的数组中，将新数组赋值给旧数组，这样数组中就没有已完成的任务了

我想要达到的结果

改变已完成项目的同时删除掉已完成项目

你可以多找几处打印一下，初步判断一下组件传过来的数据是不是正确，或者是传过来的时间是不是正确这些

显示预览项目的那块逻辑也贴出来