时间戳

首页 > 解决方案 > 导航通过 NavLinks 后 useState 值重置

javascript - 导航通过 NavLinks 后 useState 值重置

问题描述

我正在构建一个购物车应用程序。在结帐页面上，我可以添加和减去链接到“itemCount”挂钩的每个项目的数量值。但是当我点击导航栏链接到另一个页面并返回时，项目数量重置为 0。我怎样才能得到它以便即使我退出也保持当前值？谢谢。

CartItem.jsx

import React, { useState } from "react";
import "./CartItem.css";

const CartItem = (props) => {
  const [itemCount, setItemCount] = useState(0);
  const minusCartPrice = (counter) => {
    props.setCartTotal((counter -= props.price));
  };

  const addCartPrice = (counter) => {
    props.setCartTotal((counter += props.price));
  };
  return (
    <div className="item">
      <p>{props.name}</p>
      <p>
        <i
          className="bi bi-dash-square-fill minus-item"
          onClick={() => {
            props.setCartCount(props.minusItem);
            setItemCount(itemCount - 1);
            props.setCartTotal(minusCartPrice);
          }}
        ></i>
        {itemCount}

        <i
          className="bi bi-plus-square-fill add-item"
          onClick={() => {
            props.setCartCount(props.addItem);
            setItemCount(itemCount + 1);
            props.setCartTotal(addCartPrice);
          }}
        ></i>
      </p>

      <p>{props.price}</p>
      <p>Delete</p>
    </div>
  );
};

export default CartItem;

购物车页面.jsx

import React from "react";

import CartItem from "../CartItem/CartItem";
import "./CartPage.css";

const CartPage = (props) => {
  const minusItem = (counter) => {
    props.setCartCount((counter -= 1));
  };
  const addItem = (counter) => {
    props.setCartCount((counter += 1));
  };

  return (
    <div className="cart-page">
      <h3 className="cart-title">Shopping Cart</h3>
      <div className="cart-info">
        <div className="items-container">
          <div className="items-header">
            <h5>PRODUCT</h5>
            <h5>QUANTITY</h5>
            <h5>PRICE</h5>
          </div>
          {props.cartItems.map((item, id) => {
            return (
              <CartItem
                key={id}
                name={item.name}
                price={item.price}
                itemCount={item.count}
                setCartCount={props.setCartCount}
                minusItem={minusItem}
                addItem={addItem}
                setCartTotal={props.setCartTotal}
              />
            );
          })}
        </div>
        <div className="order-summary">
          <h5>Order Summary</h5>
          <hr />
          <h6>Items</h6>
          <p>{props.cartCount}</p>
          <h6>Total Price</h6>
          <p>${props.cartTotal.toFixed(2)}</p>
          <button>Checkout</button>
        </div>
      </div>
    </div>
  );
};

export default CartPage;

标签： javascriptreactjsreact-hooks

解决方案

要在应用导航期间保持您的状态，请考虑将您的状态置于全局状态（Redux、Context）上

或者为了在浏览器页面加载期间保留它们，将它们存储到浏览器存储中，如本地存储或会话存储。

像这样的东西：

import React, { useState, useEffect } from "react";

function useCounter() {
  const initialState = () =>
    Number(window.localStorage.getItem("count") || null);
  const [count, setCount] = useState(initialState);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  useEffect(() => window.localStorage.setItem("count", count), [count]);

  return { count, increment, decrement };
}

export default function Counter() {
  const { count, increment, decrement } = useCounter(5, 2);

  return (
    <div>
      <div className="counter">{count}</div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

推荐阅读