我正在使用復選框實現 Todo。我在該州有一個 id、content、status 屬性。Status 有 3 種狀態（pending、done、deleted）。待辦事項列表有一個復選框。如果狀態為待定，則不應選中復選框。如果狀態為完成，則應選中復選框。默認情況下，狀態為待定。應根據狀態選中/取消選中復選框。在刪除待辦事項時，狀態應更新為已刪除。現在我對復選框的實現感到震驚。它沒有按照要求工作。應用程序.js：import React from 'react';import Todo from './Todo';import AddTodo from './AddTodo';class App extends React.Component{  state={   todos:[   {id:1,content:'Buy milk1',status:'pending'},   {id:2, content:'buy carrots1', status: 'pending'},   {id:3,content:'Buy milk2',status:'done'},   {id:4, content:'buy carrots2', status: 'deleted'}  ]}onDelete=(id)=>{ const todo = this.state.todos.find((todoItem => todoItem.id === id)) todo.status ='deleted'; this.setState([...this.state.todos]);}onChangeCheckbox=(id, checked)=>{  const todo = this.state.todos.find((todoItem => todoItem.id === id)) if(checked){  todo.status = 'done' } else{  todo.status = 'pending' } this.setState([...this.state.todos]); }addTodo=(todo)=>{ todo.id=Math.random(); todo.status = "pending"; let todos=[...this.state.todos,todo]; this.setState({todos});}render(){ return(  <div>    <h1>Todo's App</h1>        <AddTodo addTodo={this.addTodo} />    <Todo todos={this.state.todos} deleteTodo={this.onDelete} onChangeCheckbox=     {this.onChangeCheckbox} />   </div>  ) }}export default App;