這是 react 中一個簡單的 TO-DO 應用程序，它從中App.js獲取數據，TodosData.js列表與組件一起顯示TodoItem.js?，F在可以在渲染時查看復選框和數據。但是當我點擊復選框時它不起作用。我嘗試handleChange了似乎有效的控制臺日志記錄功能。似乎handleChange函數內部可能存在我無法弄清楚的問題。我正在關注 YT 上的 freecodecamp 教程，我也檢查了幾次，但在這里找不到問題。App.js代碼：import React from 'react';import TodoItem from './TodoItem'import todosData from './todosData'class App extends React.Component {  constructor() {    super ()    this.state = { todos: todosData }    this.handleChange = this.handleChange.bind(this)  }  handleChange(id) {    this.setState(prevState => {      const updatedTodos = prevState.todos.map(todo => {        if (todo.id === id) {          todo.completed = !todo.completed        }        return todo      })      return {        todos: updatedTodos      }    })  }  render() {    const todoItems = this.state.todos.map(itemEach => <TodoItem key = {itemEach.id} itemEach = {itemEach}      handleChange = {this.handleChange} />)    return (      <div className = "todo-list">        {todoItems}      </div>    )  }}export default App;TodoItem.js代碼：import React from 'react';function TodoItem(props) {  return(    <div className = "todo-item">      <input type = "checkbox"        checked={props.itemEach.completed}        onChange={() => props.handleChange(props.itemEach.id)}      />      <p>{props.itemEach.text}</p>    </div>  )}export default TodoItemTodosData.js代碼：const todosData = [  {    id: 1,    text: "Take out the trash",    completed: true  },  {    id: 2,    text: "Grocery shopping",    completed: false  },  {    id: 3,    text: "Clearn gecko tank",    completed: false  },  {    id: 4,    text: "Mow lawn",    completed: true  },  {    id: 5,    text: "Catch up on Arrested Development",    completed: false  }]export default todosData有沒有更好的方法來實現這一點？對于像我這樣的初學者來說，這種做復選框的方式似乎相當復雜。另外我該如何改進這段代碼？