Невозможно обнаружить изменения в реквизитах, которые подключены к Redux Store в ComponentDidUpdate

Question

По какой-то причине я не могу обнаружить изменения в реквизите в ComponentDidUpdate ().

Родительский компонент:

class Parent extends Component{

  componentDidUpdate(prevProps,prevState){
    // here, prevProps is the same as this.props even though the 
    // consultations object is changed by the date component
  }

  render(){
    return(
      <p>{this.props.consultation.date}</p> /* Changes when date 
      component changes the date. This works! */
      <DateComponent />
    );
  }
}
function mapStateToProps({consultation}){
  return {consultation}
}

export default connect(mapStateToProps, null)(Parent)

Компонент даты используется для изменения даты консультации.Я удостоверился, что не изменяю состояние в редукторе и не возвращаю новый объект с помощью Object.assign ().

Дата в теге «p» меняется идеально, когда дата консультации изменяется с помощью DateComponent

В ComponentDidUpdate prevProps.consultation.date и this.props.consultation.date равны.

Оба имеют новое значение даты!Я думал, что prevProps.consultation.date даст мне более старую дату!

Я застрял, потому что не могу обнаружить изменение даты и выполнить необходимые действия в ComponentDidUpdate ().

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

Спасибо всем.

Редактировать: **** Код редуктора по запросу ****

case DATE_CHANGE_SUCCESS:
var consultation = {...state}
consultation.date = action.data.date;
return Object.assign({},state,{consultation}); 

Answer 1

Проблема была связана с глубоким копированием объектов.

Мой объект консультаций имел такую ​​структуру:

consultations = {
 3322345: {id:123,date:10/10/2018},
 1234567: {id:456,date:10/10/2018}
}

Моя ошибка заключалась в том, что в редукторе я сначала скопировал бы текущее состояние следующим образом:

var consultations_copy = {...state.consultations}

Это большая ошибка!Потому что это не делает глубокую копию объекта и все еще ссылается на исходный объект.

Поэтому, когда я внес изменение, например, консультации [1234567] .date = "12/12/2018", я фактически изменилоригинальный объект!

Лучший способ сделать глубокую копию будет:

var consultations_copy = JSON.parse(JSON.stringify(state.consultations));

Answer 2

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

{
  ...state,
  consultation : {
    ...state,
    date: action.data.date
  }
}

Я сомневаюсь, что это то, что вы хотите.Я предполагаю, что вы намеревались либо это:

Выбор (1):

{
  ...state,
  date: action.data.date
}

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

Выбор (2):

{
  ...state,
  consultation : {
    date: action.data.date
  }
}

Выбор варианта (1) или Выбор (2) зависит от модели данных.

Для достижения выбора (1):

return Object.assign({},state,consultation);

или для достижения выбора (2):

var consultation = state.consultation;
consultation.date = action.data.date;
return Object.assign({},state,{consultation});