Обновление массива при перенаправлении маршрута в React

Question

Я создаю интернет-магазин React БЕЗ реагирующей-корзины-покупок / других пакетов. По сути, у меня есть рендеринг компонента Item для каждого элемента в категории на отдельных страницах компонента категории (компонент Tops, компонент Bottoms и т. Д. c).

Для того, чтобы я смог * * * В компоненте Cart у меня есть следующие важные фрагменты в компоненте Item:

addItem() {
        inCart.push(this.props.id);
        cartTotal += (this.props.price);
        this.setState({ show: false });
    }

<Button variant="primary" onClick={this.addItem}>
                            Add to Cart
          </Button>

export let inCart = [];

Затем в компоненте Cart я отображаю каждый добавленный элемент, используя следующее:

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() {
        return (
            <div className="Page">
                <Navbar />
                <div className="Cart">
                    <div className="Cart-Items">
                        {Products.map((product) => {
                            if (inCart.includes(product.id)) {
                                return (
                                    <div className="Cart-CartItem">
                                        <CartItem
                                            id={product.id}
                                            name={product.name}
                                            img={product.img}
                                            description={product.description}
                                            price={product.price}
                                        />
                                        <div className="Cart-CartOptions">
                                            <button onClick={() => this.removeItem(product.id, product.price)}>Remove</button>
                                        </div>
                                    </div>
                                )
                            }
                        })}
                    </div>
                    <div className="Cart-Total">
                        <h1>{this.state.finalTotal}</h1>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}


export default Cart;

Поскольку массив создается и обновляется с помощью компонента Item, я не понимаю, почему он обновляет массив при добавлении элементов из других категорий / компонентов.

Есть идеи о том, что может произойти?

Answer 1

Ошибка произошла из-за изменения страницы sh при изменении страницы из-за Nav.Link в Bootstrap. Чтобы устранить эту проблему, я изменяю Nav.Link в моем Navbar на Link с React-router-dom.