如何在 React 中向待办事项应用程序添加 handlechange？

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

当您的组件被包裹在<React.StrictMode>. 如果您使用 Create React App 创建您的应用程序，这是默认完成的，请在您的index.js文件中检查它。

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

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

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

您需要做的是返回一个新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 spread operator，如下所示：

handleChange(id) {

  this.setState(prevState => (

    {

      todos: prevState.todos.map(todo => (

        {...todo, completed: todo.id === id ? !todo.completed : todo.completed}

      ))

    }

  ));

}

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