当我在 REACT 中更新输入值时，为什么我的项目会更改顺序？

Question

I have simple shopping cart app made with REACT and REDUX.

I have some items that are displayed on screen with input filed where ammount of items is changed and based on that new price i calculated. But one thing is problematic.

Price is calculated correctly when I update ammout of items or when I add new but but when I update ammount that item is rendered last. So if I update ammount of first item it will just end as last item on the list

1
2
3
4

let's say that I update item 1 then list will look like this

2
3
4
1

and this is really frustrating me. This is how I display items

{this.props.cart.map(item => {
  return (
    <div key={item.product.id}>
      <Item item={item}/>
    </div>
  )
})}

I also tried with ...reverse().map but it does the same except it puts it on the top of page instead of bottom. I want them to stay where they are when they are updated

This is parent component of single item component. Both of them are class components, I also have this in parent component

const mapStateToProps = (state) => {
  return {
    cart: state.cart.cart
  }
};

export default connect(mapStateToProps)(Cart);

Thank you for your time. If you need any other info just reach out and I will provide it.

UPDATE 1 This is how I update cart

handleChange = e => {
    if(e.target.value <= 0) {
      alert("Quantity must be grater than 0");
      return;
    }

    if(e.target.value > this.props.item.product.amount) {
      alert("Max number of products reached");
      return;
    }

    if(this.state.quantity !== e.target.value) {
      this.setState({
        quantity: e.target.value,
        // btnVisible: true
      }, () => this.props.updateCartQuantity(this.props.item.product.id, this.state.quantity))
    }
  };

<input type="number" className="form-control" onChange={(e) => {this.handleChange(e)}} value={this.state.quantity}/>

This update is happening in child component

UPDATE 2

updateCartQuantity is a function

export const updateCartQuantity = (productId, quantity) => {
  return {
    type: 'UPDATE_CART_QUANTITY',
    payload: {
      productId,
      quantity: quantity
    }
  }
};

it's data is handled here

case 'UPDATE_CART_QUANTITY':
      let item = cart.find(item => item.product.id === action.payload.productId);
      let newCart = cart.filter(item => item.product.id !== action.payload.productId);

      item.quantity = action.payload.quantity;

      newCart.push(item);

      return {
        ...state,
        cart: newCart
      };

problem is probably in this case but I just can't see it

Answer 1

Okay. It is fixed thanks to @HMR comment on post. I just realised what I was doing.

Instead of cart.filter I should use this

let newCart = cart.map(c => c.id === action.payload.productId ? {...c, quantity: action.payload.quantity} : c);

and remove

newCart.push(item);

.map will take care of looping through elements so there is no need of pushing element to newCart.push(item)

Thank you for your comment. Hope this helps someone:)