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

Question

In the output, Only the default completed values are checked. not able change the checks of tasks.

These are my Java script files

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>
   )
}

i did console log inside if condition of handle Change method,its printing 2 times. I am stuck at this for hours please fix this!

Answer 1

You are mutating the todo item instead of creating a new one. Change your handler like that:

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};
    }
}

Live Demo: