React.js / Redux - Как обновить состояние, если реквизиты не были изменены? - PullRequest
0 голосов
/ 17 декабря 2018

Я хочу обновить свое локальное состояние, если реквизиты были изменены.Но я не смог найти подходящего решения этой проблемы.getDerivedStateFromProps дает мне только nextProps и prevState, но мне нужны и prevProps, и nextProps.Пожалуйста, напишите любое ваше решение, которое может решить эту проблему)

Ситуация: Компонент Корзина (с состоянием) получает извлеченные данные из реквизита и помещает эти данные в this.state.cart.Компонент Cart имеет метод counterHandler, который срабатывает при каждом изменении счетчика (onIcrease, onDecrease, onChange).Этот обработчик вычисляет данные и создает новые данные на основе события (вычисление totalPrice и обновление суммы элемента).Затем помещает новые данные в setState для обновления пользовательского интерфейса.Состояние не меняется, потому что я делаю это:

static getDerivedStateFromProps(nextProps, prevState) {
 if (!_.isEqual(nextProps.cart, prevState.cart)) {
   return { cart: nextProps.cart };

 } else return null;
}

Я делаю это, потому что хочу обновить состояние, когда меняются реальные данные (данные, поступающие с реквизита).

Цель: обновление значения счетчика и общей цены без какого-либо побочного эффекта (значения могут быть обновлены в магазине или только для локального штата).

Вот что я имею в виду:

cart

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Вы можете использовать componentWillReceiveProps метод класса реакции.Этот метод будет выполнен, когда родительский компонент будет визуализироваться, его дочерний элемент будет выполнять метод componentWillReceiveProps в дочернем элементе.В этом методе у ребенка вы можете обновить состояние на основе новых реквизитов.

componentWillReceiveProps(nextProps){
   //You can access current props via this.props
   //You can access newProps from argument
   //Change component state after comparing both props
}
0 голосов
/ 17 декабря 2018

Возможно, вы захотите использовать componentDidUpdate , который вызывается при обновлении реквизита компонента.Он получает prevProps и prevState в качестве параметров, и у вас есть доступ к «nextProps» как this.props.

Например

componentDidUpdate(prevProps, prevState) {
  if (!_.isEqual(this.props.cart, prevState.cart)) {
   this.setState ({ cart: this.props.cart });
 }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...