Почему не меняется состояние компонента в React?

Question

[Bizki]

Здравствуйте, не понимаю, почему не изменяется состояние флажков при клике, самое интересное, если заменить todo.completed на todo.text и изменить текст, то состояние будет изменено, также если добавить console.log("Clicked", id), то оно будет выводить слово Clicked и id флажка. Буду очень рад если поможете разобраться.
Вот код родительского компонента:

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

Вот код дочернего компонента:

import React from "react"

function TodoItem(props) {
    return (
        <div className="todo-item">
            <input 
                type="checkbox" 
                checked={props.item.completed} 
                onChange={() => props.handleChange(props.item.id)}
            />
            <p>{props.item.text}</p>
        </div>
    )
}

export default TodoItem

Вот код JSON-файла откуда всё берётся:

const todosData = [
    {
        id: 1,
        text: "Take out the trash",
        completed: true
    },
    {
        id: 2,
        text: "Grocery shopping",
        completed: false
    },
    {
        id: 3,
        text: "Clean gecko tank",
        completed: false
    },
    {
        id: 4,
        text: "Mow lawn",
        completed: true
    },
    {
        id: 5,
        text: "Catch up on Arrested Development",
        completed: false
    }
]

export default todosData

Comments

[Aselmyrza]

Здравствуйте. Недавно скачала себе крутое приложение, быстрый и мощный поисковик. Оставляю ссылку
https://brauzer-skachat.ru/yandex/

Answer 1

[Дмитрий]

Строчка
todo.completed = !todo.completed
выполняется при каждом клике дважды, поэтому сначала значение становится false, затем снова true, в то время как текстовая переменная прекрасно меняется. Мне немного стыдно, поскольку точно не знаю механизм работы реакта в данном случае, но выхода тут два:
1)

if (todo.id === id) return { ...todo, completed: !todo.completed }
return todo

Что в действительности более правильно, так как каждый изменяемый элемент в реакте должен менять ссылку при изменении.

2) Вычислять новый completed сразу

onChange={() => props.handleChange(props.item.id, !props.item.completed)}

и уже в функции пользоваться полученным значением

handleChange(id, newCompleted) {
      this.setState(prevState => {
        
          const updatedTodos = prevState.todos.map(todo => {
              if (todo.id === id) {
                todo.completed = newCompleted 
              }
              return todo
          })
          return {
              todos: updatedTodos
          }
      })

Comments

[Bizki]

Действительно помогло, спасибо, вот только я не совсем понял, почему выполняется дважды?

[Алексей Джо]

Bizki, Пока неизвестно.

[Дмитрий]

Bizki, Философия реакта - делайте как мы говорим и не спрашивайте что и сколько раз у нас выполняется, это не ваше дело. В данном случае нарушено правило: смена состояния всегда должна сопровождаться созданием нового элемента а не изменением свойств старого.

[Алексей Джо]

Дмитрий, именно по этой причине я пришел к выводу - выучить наизусть доку. Вопросы иммутабельности действительно проще заучить.

[WVFFLIFE]

двойной рендер происходит из-за React.StrictMode. в доке написано всё

[Дмитрий]

WVFFLIFE, Про рендер никто не говорит, разговор про установку стейта, это же разные вещи?

Answer 2

[Алексей Джо]

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

Comments

[Дмитрий]

Зачем вы пишете ответ, если такой же ответ, причем куда более развернутый, уже дан? И знаете ли вы чем можно объяснить подобное поведение программы?

[Алексей Джо]

Дмитрий, Я не видел вашего ответа, т.к. думал над этим более 20-ти минут.
Непонятно, но код обработчика вызывается дважды. Но заметил: когда возвращаем новый экземпляр todo, то значение старого todo не меняется, т.е. всегда меняется complete для старой ссылки todo, что означает что обработчик выполняется дважды для старого состояния. Отсюда и думаю.

[Дмитрий]

RxR, Очевидно что он выполняется дважды, но странность в том что если написать

if (todo.id === id) {
  todo.completed = newCompleted 
  console.log(todo.completed)
}

то console.log сработает лишь один раз - первый, и вот это удивительное явление со своими знаниями js я объяснить не могу =) Код выполняется два раза, но в консоль выводится лишь однажды

[Алексей Джо]

я ответа пока не нашел