React Router Dom v6：重定向前执行函数时sessionStorage未设置问题

核心原因 #

React的setState是异步操作，navigate会立即触发页面跳转，导致当前组件被卸载——此时监听productsCartNew的useEffect还没来得及执行，自然无法把更新后的状态写入sessionStorage。

而addToCart里的alert会阻塞JS线程，给了React足够时间完成状态更新并触发useEffect，所以能正常写入sessionStorage。

解决方案 #

方案1：在setState回调中处理存储与跳转

利用setState的回调（状态更新完成后执行），先手动写入sessionStorage，再执行跳转：

function handleCheckout(id) {
  setProductsCartNew((prevProductsCart) => {
    const newCart = [...prevProductsCart, id];
    sessionStorage.setItem("cart", JSON.stringify(newCart));
    return newCart;
  });
  navigate("/checkout");
}

方案2：通过状态标记在useEffect中触发跳转

新增状态标记是否需要跳转结账，在useEffect中统一处理存储和跳转逻辑：

const [shouldNavigateToCheckout, setShouldNavigateToCheckout] = useState(false);

function handleCheckout(id) {
  setProductsCartNew((prevProductsCart) => [...prevProductsCart, id]);
  setShouldNavigateToCheckout(true);
}

useEffect(() => {
  sessionStorage.setItem("cart", JSON.stringify(productsCartNew));
  if (shouldNavigateToCheckout) {
    navigate("/checkout");
    setShouldNavigateToCheckout(false);
  }
}, [productsCartNew, shouldNavigateToCheckout, navigate]);

内容的提问来源于stack exchange，提问作者badatcoding