Как правильно обновить компонент в данном случае?

Question

[Nikita Shchypylov]

Всем привет!

Внедряю логики с запретом на ре-рендер компонента если нажали на кнопку. Сейчас код такой:

state = {
  updatesLocked : false
};

shouldComponentUpdate(nextProps, nextState) {
  return !nextState.updatesLocked
}

updatesButtonHandle = () => {
  this.setState({
    updatesLocked : !this.state.updatesLocked
  });
}

render () {
  const { updatesLocked } = this.state;
  return (
    <div className={styles.updatesButton} onClick={this.updatesButtonHandle} role="presentation">
      {updatesLocked ? (
        <div className={styles.lockIcon}>
          <LockClosedIcon />
        </div>
      ) : (
        <div className={styles.lockIcon}>
          <LockOpenIcon />
        </div>
      )}
    </div>
  )
}

Как видно из кода, при клике на кнопку я меняю стейт и на основе стейта запрещаю/разрешаю обновление компонента, но есть проблема с изменением иконки в кнопке. Она не обновляется при клике на неё (так как срабатывает shouldComponentUpdate).
Как тут можно обновить иконку при нажатии на кнопку?
Спасибо

Answer 1

[0xD34F]

Условие допустимости обновления должно быть чуть более сложным - при запрете надо допускать обновление в случае, если вы пытаетесь выполнить разблокировку, т.е:

shouldComponentUpdate(nextProps, nextState) {
  return !this.state.updatesLocked || !nextState.updatesLocked;
}

Comments

[Nikita Shchypylov]

Спасибо большое!

[Nikita Shchypylov]

Еще такой вопрос : как только я нажал на иконку, чтобы опять получать данные то компонент сразу же обновляется. Если ли возможность обновлять не сразу, а после следующего триггера?

[0xD34F]

Nikita Shchypylov, ну тогда не обновляйте при разблокировке:

shouldComponentUpdate(nextProps, nextState) {
  return !this.state.updatesLocked;
}

[Nikita Shchypylov]

0xD34F, Согласен, но тогда и иконка останется "закрытой"

[0xD34F]

Nikita Shchypylov, а что, если вынести представление данных в отдельный компонент, и блокировать его? Примерно так.

[Nikita Shchypylov]

0xD34F, Большое спасибо еще раз! Создал компонент как ваш App и вывел графики через children. Хорошего дня вам :)