@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: 'Новая карточка',
              },
            ],
          },
        ],
      }
    })
  }
  • Вопрос задан
  • 97 просмотров
Пригласить эксперта
Ответы на вопрос 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*/}
        ]
      }
    }
  }
})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы