Почему в componentWillReceiveProps nextProps всегда равны this.props?

Question

[Vanya Huk]

есть метод

componentDidUpdate(nextProps){
		console.log( nextProps.changed.page, this.props.changed.page )
	}

react работает в связке с redux

почему постоянно nextProps равны this.props ?

Comments

[Роман Александрович]

вам так кажется.

[Vanya Huk]

Роман Александрович,

[Роман Александрович]

Vanya Huk, ха я вас понял. А вы посмотрите this.props и nextProps. Там точно в каком нибудь из них будет разница

Answer 1

[Антон Спирин]

Так не должно быть.

Comments

[Vanya Huk]

Антон Спирин,

[Антон Спирин]

Vanya Huk, а что вы туда передаете и как обновляете. Возможно все делаете неправильно и объект changed у вас никогда не меняется. Данные должны быть иммутабельными. У вас, видимо, нет.
И первым аргументом в componentDidUpdate приходят prevProps, а не nextProps.

Код свой покажите. Редьюсер. Компонент.

[Vanya Huk]

Антон Спирин,

const filterParams = (state = initialState, action) => {

	switch( action.type ){

		case "UPDATE_CHANGED":
			return Object.assign({}, state, action.payload );

		default :  return state;

	}

}

[Антон Спирин]

Vanya Huk, а что в payload кладете, какой initial state? Метод в компоненте которым обновляете состояние.

[Vanya Huk]

Антон Спирин, this.props.changed но метод assign должен создавать новый обект

[Антон Спирин]

Vanya Huk, покажите уже action и initialState. Вы что-то недоговариваете. Если в payload лежит вложенный объект, то он у вас никогда не меняется.

[Vanya Huk]

Антон Спирин, action

export const updateChanged = (object) => {

	return {type: 'UPDATE_CHANGED', payload: object}

}

initialState

const initialState = {

		page: null,

		sort: null,

		period: null

	}

[Vanya Huk]

Антон Спирин , вот когда в редюсере делаю вывод в консоль

const filterParams = (state = initialState, action) => {

	switch( action.type ){

		case "UPDATE_CHANGED":

			console.log( initialState )
			console.log( Object.assign({}, state, action.payload ) )
			return  Object.assign({}, state, action.payload );

		default :  return state;

	}

}

получаеться все норм

[Антон Спирин]

Vanya Huk, а в mapStateToProps что?

[Антон Спирин]

Vanya Huk, вы сделайте такую проверку:

componentDidUpdate(prevProps){
  console.log(prevProps.changed === this.props.changed)
}

Если true значит, что-то где-то не так.

[Vanya Huk]

Антон Спирин,

export default connect(state => ({

	api: state.api,

	changed: state.filterParams,

	params: state.filterAjaxParams

}), matchDispatchToProps)(Catalog);

[Vanya Huk]

Антон Спирин, странно только то, что есле проверять

console.log(prevProps.changed === this.props.changed)

то вернет false, но мне нужно только 1 свойство this.props.changed.page проверить изменилось ли оно

[Антон Спирин]

Vanya Huk, тут без кода вашего приложения не скажешь, надо всю цепочку просматривать. Однозначно так быть не должно.

[Антон Спирин]

Vanya Huk, еще вы в примере:

const filterParams = (state = initialState, action) => {

  switch( action.type ){

    case "UPDATE_CHANGED":

      console.log( initialState )
      console.log( Object.assign({}, state, action.payload ) )
      return  Object.assign({}, state, action.payload );

    default :  return state;

  }

}

Выводите initialState
Попробуйте вывести state:

const filterParams = (state = initialState, action) => {

  switch( action.type ){

    case "UPDATE_CHANGED":

      console.log( state )
      console.log( Object.assign({}, state, action.payload ) )
      return  Object.assign({}, state, action.payload );

    default :  return state;

  }

}

[Антон Спирин]

Vanya Huk, вы точно нигде в коде не делаете подобного?:
this.props.change.page = 2;

[Vanya Huk]

Может где-то и пролетает

[Антон Спирин]

Vanya Huk, подобного делать нельзя, получается вы мутируете объект который лежит в store, потом диспатчите изменения, старый измененный объект подменяется новым и при сравнении там одинаковые значения. Полученные props вообще нельзя изменять, никогда так не делайте.

[Vanya Huk]

Антон Спирин, а как избежать такого?
через assign?

[Антон Спирин]

Vanya Huk, покажите какой-нибудь живой пример и постараюсь помочь. Сам Object.assign очень редко использую.