Javascript 反应待办事项列表-复选框未更改

我开始学习React，现在正在学习教程。我尝试在单击时更改复选框。在编写setState代码之前，我检查了handleChange函数是否正常工作。我做了教程中的所有事情，但当我单击复选框时，它们没有改变。看来我遗漏了什么。代码如下：

App.js：

import React, { Component } from "react";
import TodoItem from "./TodoItem";
import todosData from "./todosData";

class App extends 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 className="todo-list">
          {todoItems}
      </div>
    )
  }
}

export default App;

---

实际上，问题是您在

handleChange

中修改回调参数，通常强烈建议避免修改它们，因为它们会导致意外行为。我将改写如下：

class App extends 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) return { ...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 className="todo-list">{todoItems}</div>;
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
todos:todosData
};
this.handleChange=this.handleChange.bind（this）；
}
手柄更换（id）{
this.setState（prevState=>{
const updatedTodos=prevState.todos.map（todo=>{
if（todo.id==id）返回{…todo，completed:！todo.completed}；
返回待办事项；
});
返回{
待办事项：更新的待办事项
};
});
}
render（）{
const todoItems=this.state.todos.map（项=>(
));
返回{todoItems}；
}
}

---

您可以在此处检查结果：

事实上，问题是您在

handleChange

中变异回调参数，通常强烈建议避免变异它们，因为它们会导致意外行为。我将改写如下：

class App extends 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) return { ...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 className="todo-list">{todoItems}</div>;
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
todos:todosData
};
this.handleChange=this.handleChange.bind（this）；
}
手柄更换（id）{
this.setState（prevState=>{
const updatedTodos=prevState.todos.map（todo=>{
if（todo.id==id）返回{…todo，completed:！todo.completed}；
返回待办事项；
});
返回{
待办事项：更新的待办事项
};
});
}
render（）{
const todoItems=this.state.todos.map（项=>(
));
返回{todoItems}；
}
}

您可以在此处检查结果：

class App extends 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) return { ...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 className="todo-list">{todoItems}</div>;
  }
}