检查复选框在 React 中不起作用

Question

这是 react 中一个简单的 TO-DO 应用程序，它从中App.js获取数据，TodosData.js列表与组件一起显示TodoItem.js。现在可以在渲染时查看复选框和数据。但是当我点击复选框时它不起作用。我尝试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有没有更好的方法来实现这一点？对于像我这样的初学者来说，这种做复选框的方式似乎相当复杂。另外我该如何改进这段代码？

Answer 1

您正在改变handleChange函数中的状态。因此它得到了prevState两次。一次用于原始先前状态，接下来用于您在handleChange.

todo通过像这样传播 from 状态，您可能会丢失参考。

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

  };

});

这是一个有效的代码框