React页面重载后目标组件不显示的解决方案咨询

你的核心问题是页面刷新会清空React内存中的状态：原代码里的setIsModalOpen修改的是内存状态，刷新后直接被重置；而且window.location.reload会立即中断后续代码执行，toast.success根本不会触发。

方案1：避免页面刷新（优先推荐） #

除非有必须刷新页面的硬性需求，否则完全没必要刷新——React的优势就是单页无刷新更新内容。直接移除window.location.reload，处理完业务逻辑后更新状态、弹出提示即可：

const checkout = () => {
  setIsModalOpen(!isModalOpen);

  // 这里插入你的结算逻辑，比如调用后端提交订单的API
  // 示例：await api.submitOrder();

  toast.success("Thank you for your purchase!", {
    position: "top-center",
    autoClose: 4000,
    theme: "dark",
  });
};

方案2：必须刷新页面时的处理 #

如果确实需要刷新（比如依赖页面刷新重置全局资源），就需要把状态持久化到本地存储，刷新后再读取恢复：

步骤1：修改点击函数，存储状态 #

const checkout = () => {
  // 把需要显示组件的状态存在localStorage
  localStorage.setItem('showSuccessBar', 'true');
  window.location.reload();
};

步骤2：组件加载时读取状态 #

在你的组件中添加useEffect，页面刷新后读取存储的状态，触发组件显示和提示：

import { useEffect } from 'react';

// ... 组件其他代码

useEffect(() => {
  const shouldShow = localStorage.getItem('showSuccessBar');
  if (shouldShow === 'true') {
    setIsModalOpen(true);
    toast.success("Thank you for your purchase!", {
      position: "top-center",
      autoClose: 4000,
      theme: "dark",
    });
    // 用完就删除，避免下次打开页面自动显示
    localStorage.removeItem('showSuccessBar');
  }
}, []);

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