Потеря состояния in_cart только при обновлении определенной страницы

Question

Итак, в настоящее время я использую состояния, чтобы определить, добавил ли пользователь товар в свою корзину или нет. Он работает почти безупречно, за исключением случаев, когда они находятся на «странице продукта» (страница, на которой они добавляют в корзину), и они обновляют sh, он очищает массив in_cart, но если я на главной странице после добавления их, я можно обновить sh все, что я хочу, это означает, что это должно быть что-то в коде страницы продукта, но не могу понять это, вот код страницы продукта:

const ProductPageBody = ({ products, in_cart, set_in_cart }) => {
  //Keeps track of color user selects
  const [color, setColor] = useState("");
  //Keeps track of size user selects
  const [size, setSize] = useState("Small");

  //Filters out the product that the user selected
  const { shirtName } = useParams();
  const shirt = products.filter((product) => product.name === shirtName);
  //Updates state size of shirt being selected
  const updateSize = () => {
    let select = document.getElementById("sizeSelect");
    let text = select.options[select.selectedIndex].text;
    setSize(text);
  };

  //Updates state color of shirt being selected
  const updateColor = useCallback(async (userColor, shirt) => {
    const shirtColorSource = await fetch(
      `http://localhost:5000/products/${shirt.product_id}/${userColor}`
    );
    const shirtColor = await shirtColorSource.json();
    console.log(shirtColor);
    shirt.image = shirtColor[0].image;
    setColor(userColor);
  }, []);

  //Occurs when ADD TO CART is clicked
  const updateInCart = async (e) => {
    e.preventDefault();
    const newShirt = { ...shirt[0] };
    newShirt["color"] = color;
    newShirt["size"] = size;
    const newList = in_cart.list.concat(newShirt);
    const cost = newList.reduce((sum, shirt) => sum + shirt.price, 0);
    set_in_cart({
      list: newList,
      totalcost: cost,
    });
  };

  //Stores in cart items
  useEffect(() => {
    localStorage.setItem("inCartItems", JSON.stringify(in_cart));
  }, [in_cart]);

и его родительский элемент, где состояние находится:

const Routes = () => {
  const [products, setProducts] = useState([]);

  const [in_cart, set_in_cart] = useState({
    list: [],
    totalCost: 0,
  });
  const getProducts = async () => {
    try {
      const response = await fetch("http://localhost:5000/products/");
      const jsonData = await response.json();

      setProducts(jsonData);
    } catch (err) {
      console.error(err.message);
    }
    if (localStorage.getItem("inCartItems")) {
      set_in_cart(JSON.parse(localStorage.getItem("inCartItems")));
    }
  };
  useEffect(() => {
    getProducts();
  }, []);

любая помощь будет принята с благодарностью, спасибо!

Answer 1

В Routes добавьте эффект для сохранения данных корзины (in_cart) в localStorage при обновлении.

useEffect(() => {
  try {
    localStorage.setItem("inCartItems", JSON.stringify(in_cart));
  } catch(err) {
    // do something if cart persistence fails
  }
}, [in_cart]);