如何在反应中将句柄更改添加到待办事项应用程序？

Question

我是新来的反应和制作待办事项应用程序。

我添加了一个事件侦听器（handleChange）来将 todosData.completed 从 true 翻转为 false，反之亦然，从而允许用户选中和取消选中复选框。

我该如何纠正这一点。 这是我的代码：

 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(item => (
      <TodoItem
        key={item.id}
        item={item}
        handleChange={this.handleChange}/>
    ));

    return(
      <div>{todoItems}</div>
    );
  }
}

export default App;

function TodoItem(props) {
  return (
    <div>
      <input 
        type = 'checkbox' checked = {props.item.completed}
        onChange = {() => props.handleChange(props.item.id)} />
      <p> {props.item.task} </p>
    </div>
  );
}

export default TodoItem;

有人能告诉我我错过了什么吗？

Answer 1

正如@ChrisG 在评论中指出的那样，当您的组件被包裹在<React.StrictMode>时，就会发生这种情况。 如果您使用 Create React App 创建您的应用程序，这是默认完成的，请在您的index.js文件中检查它。

StrictMode 是一项开发功能，可强制您编写更好的代码。 它只影响您的开发构建，因此如果在生产模式下构建和运行，您的代码应该可以正常工作。

StrictMode 所做的一件事是运行setState方法两次，以确保您不依赖它只运行一次。 因此，第一次运行时，您会按预期反转 todo.completed，第二次将其恢复为原始值。

这告诉你的是，你的handleChange函数实际上是用一个不纯的方法更新状态，因为你实际上改变了prevState.todos.map的todo对象。

您需要做的是返回一个新的todo对象，该对象将是另一个对象的副本，仅修改了completed属性，如下所示：

handleChange(id) {
  this.setState(prevState => {
    const updatedTodos = prevState.todos.map(todo => {
      return {
        id: todo.id,
        task: todo.task,
        completed: todo.id === id ? !todo.completed : todo.completed
      };
    });

    return {
     todos: updatedTodos
    };
  });
}

或者使用ES6 扩展运算符，如下所示：

handleChange(id) {
  this.setState(prevState => (
    {
      todos: prevState.todos.map(todo => (
        {...todo, completed: todo.id === id ? !todo.completed : todo.completed}
      ))
    }
  ));
}

我相信这是比 Chris G 建议删除 <React.StrictMode> 更好的解决方案，因为 StrictMode 实际上可以帮助您编写更好的代码。

Answer 2

这是我的代码示例，以最简单的方式使用反应状态更新和删除列表中的项目https://codesandbox.io/s/todo-app-using-react-state-9mfw