Почему не ререндерится компонент после изменения стейта?

Question

[Weij33t]

Возникла проблема, заключающаяся в том, что после изменения стейта(дебажил через console.log) не происходит ререндера компонента.
Сам компонент и его дочки зависят от стейта:

<div className="main-board">
            {this.state.cols.map((col, index) => {
              return (
                <Column
                  key={index}
                  id={index}
                  name={col.name}
                  colId={index}
                  col={this.state.cols[index]}
                  cards={this.state.cols[index].cards}
                  addCard={this.insertNewCard}
                  deleteCard={this.deleteHandler}
                />
              )
            })}

По нажатию на кнопку из дочернего компонента вызывается метод из родительского:

insertNewCard = (id) => {
    this.setState((prevState) => {
      prevState.cols[id].cards = [
        ...prevState.cols[id].cards,
        {
          id: this.getNewId(),
          date: '11.11.1234',
          grade: '10',
          name: 'Созданный',
        },
      ]
      return {
        cols: prevState.cols,
      }
    })
  }

Как уже говорил - стейт обновляется, вызываются и в дочернем, и в родительском методы render, в консоль выводится изменённый стейт, но ререндера не происходит.

Жизненные циклы не используются, другой подобный метод также изменяет метод, однако происходит перерисовка(добавление колонки)

insertNewCol() {
    console.log('insertNewCol')
    this.setState((prevState) => {
      return {
        cols: [
          ...this.state.cols,
          {
            name: 'Созданная колонка',
            cards: [
              {
                id: this.getNewId(),
                date: '00.00.9999',
                grade: '1',
                name: 'Новая карточка',
              },
            ],
          },
        ],
      }
    })
  }

Answer 1

[Алексей Уколов]

cols: prevState.cols,

Зачем вы мутируете объект предыдущего состояния?
Вы всегда возвращаете ссылку на один и тот же объект, вот Реакт и не понимает, что он изменился, ведь внутрь объекта он не смотрит.

this.setState((prevState) => {
  return {
    cols: prevState.map((col, index) => {
      if (index !== id) {
        return col;
      }

      return {
        ...col,
        cards: [
           ...col.cards,
           {/*new card fields*/}
        ]
      }
    }
  }
})

Comments

[Weij33t]

Но если он не понимает, что изменился, почему тогда вызывается метод Render?
Я попробовал Ваш способ, однако результат тот же - в консоль изменения выводятся, но обновлений нет

[Алексей Уколов]

Я из-за названия аргумента посчитал, что cols у вас объект, а на самом деле там массив. Код надо адаптировать под тип, возможно, дело в этом.

[Алексей Уколов]

Сделайте пример на jsfiddle.

[Weij33t]

https://jsfiddle.net/Lc89kp51/9/

Пример изменения кода и преобразование в массив объектов

[Алексей Уколов]

"Сделайте пример на jsfiddle" != "вставьте мой код на jsfiddle" :)

Но, судя по тому, что у вас там, проблема опять-таки в мутации. Попробуйте обновлённый код.
Если и он не сработает, без нормального интерактивного примера я ничем больше помочь не смогу.

[Weij33t]

К сожалению, он не сработал. НО!
Я нашёл ошибку. Если интересно: в дочерний компонент приходили пропсы, каждый раз разные(стейт же меняется) и внутри дочернего компонента в стейт значения шли из пропсов и вся работа основывалась на стейте, но почему-то с измененными пропсами не менялся стейт дочернего элемента - не было изменений во внешнем виде.
Удалил стейт у дочернего элемента и все основано на пропсах и работает.
Спасибо за уделённое время!

[Алексей Уколов]

Ну, не «почему-то» не менялся, а потому что так Реакт работает: https://reactjs.org/docs/react-component.html