我的简单反应 todoapp 的 handleChange 方法没有做它需要做的事情

Question

在输出中，只勾选了默认完成的值！无法更改任务检查。

这些是我的 Java 个脚本文件

app.js

class App extends Component {
  constructor() {
    super()
    this.state = {
      todos: Todosdata
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(id) {
    this.setState(prevState => {
      const udpated = prevState.todos.map(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed
        }
        return todo
      })

      return {
        todos: udpated
      }
    })
  }
  render() {
    const todoelements = this.state.todos.map(item => <ToDoItem key={item.id}
      todoitem={item}
      handleChange={this.handleChange} />)

    return (
      <div className="App">
        < div className="todo-list" >
          {todoelements}
        </div >
      </div>
    )
  }
}

ToDoItem.js

const ToDoItem = (props) => {
    const Afterstyle = {
        fontColor: "red",
        textDecoration: "line-through"
    }

    return (
        <div className="todo-item">
            <input type="checkbox"
                checked ={props.todoitem.completed}
                onChange ={() => props.handleChange(props.todoitem.id)} />
            <p style={props.todoitem.completed ? Afterstyle : null}>{props.todoitem.task}</p>
        </div>
   )
}

如果句柄更改方法的条件，我在里面做了控制台日志，它打印了 2 次。我坚持了几个小时，请解决这个问题！

Answer 1

您正在改变 todo 项，而不是创建一个新项。像这样更改您的处理程序：

handleChange(id) {
    this.setState(prevState => {
        const udpated = prevState.todos.map(todo => {
            if (todo.id === id) {
                // if the id matches return a new object
                return {...todo, completed: !todo.completed};
            }
        
            return todo
        });

        return {todos: udpated};
    }
}

现场演示：

我的简单反应 todoapp 的 handleChange 方法没有做它需要做的事情

My handleChange method of simple react todoapp is not doing what it needs to do

javascript

reactjs

create-react-app