React State Reverts to Previous When Navigating Away - reactjs

Question

I'm currently building a React eCommerce application, and I'm having trouble with getting the true cart totals.
When an item is added to the cart, the cart total is found with the following on the Item:
addItem() {
inCart.push(this.props.id);
cartColors.push({ item: this.props.id, color: this.state.color, size: this.state.size });
cartTotal += (this.props.price);
this.setState({ show: false });
}
export let cartTotal = 0;
Then in the cart, I have the following:
import { inCart, cartTotal, cartColors } from '../PageItem/PageItem.js';
class Cart extends Component {
constructor(props) {
super(props);
this.state = {
cartList: inCart,
finalTotal: cartTotal.toFixed(2)
}
}
removeItem(itemId, itemPrice) {
var itemIndex = this.state.cartList.indexOf(itemId);
var newList = inCart.splice(itemIndex, 1);
var newTotal = (this.state.finalTotal - itemPrice).toFixed(2);
this.setState({ cartList: newList, finalTotal: newTotal });
}
The issue is - when I first go to the cart, it works. I see the true total based on the items currently in the cart, and when I remove the items the total updates correctly. However, when I leave the cart and add in more items, then navigate back into the cart, I see the previous cart total (the one shown when viewing the cart the first time).
I've tried updating the cartTotal within the removeItem function like so:
var newTotal = (cartTotal - itemPrice).toFixed(2);
And using
this.setState({ cartList: newList, finalTotal: newTotal });
But this provides a total that's off. Like it will add up correctly, but once I start to remove items it gets funky. It'll remove the item and update the price correctly the first time, but then on the second removal, the total reverts to the full previous total and removes the price from that - so it's off.
How can I get the total to update permanently?
Here are the full components:
PageItem component:
//Dependencies
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Card, Button, Modal, Row, Container, Col } from 'react-bootstrap';
import PhotoSlider from '../../PhotoSlider/PhotoSlider.js';
import './PageItem.css';
import ColorButton from '../../ColorButton/ColorButton.js';
import SizeButton from '../../SizeButton/SizeButton.js';
class PageItem extends Component {
constructor(props, context) {
super(props, context);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.addItem = this.addItem.bind(this);
this.changeColor = this.changeColor.bind(this);
this.changeSize = this.changeSize.bind(this);
this.state = {
show: false,
color: 1,
selectedColor: '',
size: 0
};
}
changeColor(colorId) {
this.setState({ color: colorId });
}
changeSize(sizeId) {
this.setState({ size: sizeId });
}
handleClose() {
this.setState({ show: false, color: 1 });
}
handleShow() {
this.setState({ show: true });
}
addItem() {
inCart.push(this.props.id);
cartColors.push({ item: this.props.id, color: this.state.color, size: this.state.size });
cartTotal += (this.props.price);
this.setState({ show: false });
}
render() {
return (
<div className="item">
<Card style={{ minWidth: '18rem' }} className="PageItem-Card" onClick={this.handleShow}>
<Card.Img className="PageItem-Card-Img" variant="top" src={this.props.img} />
<Card.Body className="PageItem-Card-Body">
<Card.Title className="PageItem-Title">{this.props.name}</Card.Title>
<Card.Text className="PageItem-Price">
{this.props.price}
</Card.Text>
<button className="PageItem-Button">Quick View</button>
</Card.Body>
</Card>
<Modal dialogClassName="custom-dialog" show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>{this.props.name}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Row>
<Col>
{this.props.colors.map((color) => {
if (color.colorId === this.state.color) {
return (
<div>
<PhotoSlider className="Modal-PhotoSlider"
img1={color.img1}
img2={color.img2}
img3={color.img3}
img4={color.img4}
img5={color.img5} />
</div>
)
}
})}
<div className="PageItem-ColorButton-Options">
{this.props.colors.map((color) => {
return (
<div className="PageItem-ColorButton">
<ColorButton
colorId={color.colorId}
colorName={color.colorName}
colorHex={color.colorHex}
colorImg={color.colorImg}
onClick={this.changeColor}
/>
</div>)
})}
</div>
{this.props.colors.map((color) => {
if (color.colorId === this.state.color) {
this.setState.selectedColor = color.colorName;
return (
<div>
<p>{color.colorName}</p>
</div>
)
}
})}
<div className="PageItem-SizeButton-Options">
{this.props.sizes.map((size) => {
return (
<div className="PageItem-SizeButton">
<SizeButton
sizeId={size.sizeId}
sizeValue={size.sizeValue}
onClick={this.changeSize}
/>
</div>)
})}
</div>
</Col>
<Col>
<p>{this.props.description}</p>
</Col>
</Row>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
<Link to={`/products/${this.props.id}`}><Button variant="secondary">See More</Button></Link>
<Button variant="primary" onClick={this.addItem}>
Add to Cart
</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
export let inCart = [];
export let cartColors = [];
export let cartTotal = 0;
export default PageItem;
Cart component:
import React, { Component } from 'react';
import { Col, Row } from 'react-bootstrap';
import { inCart, cartTotal, cartColors } from '../PageItem/PageItem.js';
import CartItem from '../CartItem/CartItem.js';
import Products from '../../productData.js';
import Navbar from '../../Navbar/Navbar.js';
import Footer from '../../Footer/Footer.js';
import CartImg from '../../Images/SVG/cart2.svg';
class Cart extends Component {
constructor(props) {
super(props);
this.state = {
cartList: inCart,
finalTotal: cartTotal.toFixed(2)
}
}
removeItem(itemId, itemPrice) {
var itemIndex = this.state.cartList.indexOf(itemId);
var newList = inCart.splice(itemIndex, 1);
var newTotal = (this.state.finalTotal - itemPrice).toFixed(2);
this.setState({ cartList: newList, finalTotal: newTotal });
}
render() {
console.log(this.state.finalTotal);
return (
<div className="Page">
<Navbar />
<div className="Cart">
<img src={CartImg}></img>
<h1>Shopping Cart</h1>
<div className="Cart-Items">
{Products.map((product) => {
var productId = cartColors.find(item => item.item === product.id);
if (inCart.includes(product.id)) {
return (
<Row middle="xs" className="Cart-CartItem">
<Col xs={6}>
<CartItem
id={product.id}
name={product.name}
img={product.img}
description={product.description}
price={product.price}
/></Col>
<Col xs={6}>
<div className="Cart-CartOptions">
{product.colors.map((color) => {
if (productId.color === color.colorId) {
return (
<div>
<p>{color.colorName}</p>
</div>
)
}
})}
{product.sizes.map((size) => {
if (productId.size === size.sizeId) {
return (
<div>
<p>{size.sizeValue}</p>
</div>
)
}
})}
<button onClick={() => this.removeItem(product.id, product.price)}>Remove</button>
</div></Col>
</Row>
)
}
})}
</div>
<div className="Cart-Total">
<h1>{this.state.finalTotal}</h1>
</div>
</div>
<Footer />
</div>
)
}
}
export default Cart;

Answer 1

Each time you navigate away from the cart, your component likely unmounts (hard to know for sure without seeing the routes and how you render certain components), so when the component re-mounts, it re-initializes the finalTotal to the cartTotal variable which you import. Your removeItem function simply changes the Cart component's state variable, rather than the imported cartTotal variable, so when you navigate back to the cart, it will set the value to cartTotal which holds the old value of the variable, rather than what is changed by removeItem. Make sure to update this variable before setting it to the state using an updater function from the PageItem component or something similar:
import { inCart, cartTotal, updateTotal, cartColors } from '../PageItem/PageItem.js';
...
removeItem(itemId, itemPrice) {
var itemIndex = this.state.cartList.indexOf(itemId);
var newList = inCart.splice(itemIndex, 1);
var newTotal = (this.state.finalTotal - itemPrice).toFixed(2);
updateTotal(newTotal); // this will update the cartTotal variable in the PageItem component
this.setState({ cartList: newList, finalTotal: newTotal });
}
And in PageItem:
updateTotal(total) {
cartTotal = total; // so the total change will persist when you navigate away
}
Or, you can move your removeItem function to the PageItem component alongside the addItem function and mutate inCart directly and update cartTotal directly.
Also, Array.prototype.slice modifies an array in place, and returns an array of the deleted elements, so I'm not sure what you're trying to do with these lines:
var newList = inCart.splice(itemIndex, 1);
...
this.setState({ cartList: newList, finalTotal: newTotal });