Dave Stein Dave Stein - 7 months ago 14
Javascript Question

Why is shouldComponentUpdate saying current props are new props in React?

I am using Redux, but not sure that this would be the cause.

I have code like this

<Page>
<AnotherChild />
<Pricing quotes={this.props.item.quotes} />
</Page>


<Pricing>
has a child component that fires a dispatch on change of an input, which updates prices of item.

<Pricing>
has this:

shouldComponentUpdate(nextProps, nextState) {
console.log(nextProps.quotes[0].value, this.props.quotes[0].value);
}


So let's say the input has
10
, I highlight all and press
5
, the logs show
5
for both the next and current prop values.

Confused how that is the case. I would think I'd need to see a log of 10 -> 5 at some point because it starts at 10 and couldn't magically switch from a parent, right?

EDIT

Here is a code block that is triggering the prop change.

_updateDiscountAmount() {
var discountAmount = +this.refs.discount_amount.getValue();

var quotes = this.props.quotes.map(quote => {

var promoPrice = quote.value;

if (Number.isNaN(discountAmount)) {
discountAmount = 0;
}

quote.percentage = discountAmount;

promoPrice = (promoPrice - (promoPrice * discountAmount/100)).toFixed(2);

return quote;
});


this.props.dispatch({
type: 'CURRENT_PAGE_UPDATE',
data: {
discount_amount: discountAmount,
quotes
}
});
},

Answer

@wintvelt above gave the answer so if he writes it in, I will mark it.

Basically the above code is failing. Even though I am mapping to a new array, I am changing what should be unmutable.

All I needed to do to fix the problem was make a copy of quote within the loop before modifying it.

ie:

var quotes = this.props.quotes.map(quote => {

  // Copy the object here
  quote = Object.assign({}, quote);

  var promoPrice = quote.value;

  if (Number.isNaN(discountAmount)) {
    discountAmount = 0;
  }

  quote.percentage = discountAmount;

  promoPrice = (promoPrice - (promoPrice * discountAmount/100)).toFixed(2);

  return quote;
});