Javascript 选中复选框在React中不起作用

这是react中的一个简单的待办应用程序，

app.js

从

TodosData.js

获取数据，列表显示为组件

TodoItem.js

。现在，可以在渲染时查看复选框和数据。但是当我点击复选框时，它就不起作用了。我尝试了控制台日志

handleChange

功能，该功能似乎可以工作。似乎

handleChange

函数中可能存在我无法解决的问题

我正在关注一个关于YT的freecodecamp教程，我也检查了好几次，但在这里找不到问题

App.js代码：

---

有没有更好的方法来实现这一点？对于像我这样的初学者来说，这种方法似乎很复杂。还有，如何改进此代码？

您正在修改

handleChange

函数中的状态。因此，它两次获得

prevState

。一次用于上一个原始状态，下一次用于在

handleChange

中进行的更新

您可能会丢失引用，方法是将

todo

从如下状态展开

this.setState(prevState => {
  const updatedTodos = prevState.todos.map(todo => {
    const resTodo = { ...todo };
    if (todo.id === id) {
      resTodo.completed = !resTodo.completed;
    }
    return resTodo;
  });
  return {
    todos: updatedTodos
  };
});

---

这里有一个

感谢您的回复。现在它开始工作了。请你在这行解释一下-

const resTodo={…todo}@FarhanBinAmin，应该有帮助
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 TodoItem

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

this.setState(prevState => {
  const updatedTodos = prevState.todos.map(todo => {
    const resTodo = { ...todo };
    if (todo.id === id) {
      resTodo.completed = !resTodo.completed;
    }
    return resTodo;
  });
  return {
    todos: updatedTodos
  };
});