在重定向之前运行函数时未设置sessionStorage（React Router Dom v6）

Question

我有两个几乎相同的功能：

这个有效

    function addToCart(id) {
      setProductsCartNew((prevProductsCart) => [...prevProductsCart, id]);
      alert("Product added to cart");
    }

这个没有

    function handleCheckout(id) {
      setProductsCartNew((prevProductsCart) => [...prevProductsCart, id]);
      navigate("/checkout");
    }

使用效果：

    useEffect(() => {
      sessionStorage.setItem("cart", JSON.stringify(productsCartNew));
    }, [productsCartNew]);

为什么会这样呢？我确实被重定向了，所以这部分功能可以工作。

我已经检查了“productsCartNew”的值，它实际上确实得到了更新，只是它没有在 sessionStorage 中设置，这就是问题所在。

Answer 1

按照设计，setState 是异步的，因此该值将在将来的某个时间实际更新。 由于您正在导航到不同的页面（/checkout），我假设您不需要实际更改起始组件中的状态，因为您需要将其传递到目标页面。

处理逻辑的正确方法如下：

删除 useEffect 并将逻辑移至

handleCheckout

func 中：

function handleCheckout(id) {
  const cartArray = [...productsCartNew, id]; // productsCartNew is the state array
  sessionStorage.setItem("cart", JSON.stringify(cartObject));
  navigate("/checkout");
}

通过这种方式，您可以传递添加到购物车的每个产品以及传递给句柄函数的 id，正确设置 sessionStorage，然后导航到结帐页面，在该页面中检索 sessionStorage 中的信息。