React如何实现Modal仅在当前页面展示且每日仅弹出一次

需求对应解决思路 #

• 每日仅弹出一次：通过localStorage持久化存储弹窗最后一次弹出的日期，每次执行显隐判断前先比对日期，仅当日期变更后才会重新触发判断逻辑
• 仅在对应页面弹出：将当前Modal、状态、关联逻辑全部从全局公共布局组件迁移至目标业务页面的组件内部，页面切换时组件销毁，Modal自动消失不会出现在其他页面
• 刷新不重复触发：依赖localStorage的持久化存储能力，同日期内刷新页面读取存储值后会直接跳过弹窗逻辑

修改后代码示例 #

1. 基础日期工具函数 #

// 生成YYYY-MM-DD格式的当日日期字符串，用于日期比对
const getTodayStr = () => {
  const d = new Date()
  return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

2. 修改后的状态与useEffect逻辑 #

const [displayTraits, setDisplayTraits] = useState(false)

useEffect(() => {
  const lastShowDate = localStorage.getItem('traits_modal_last_show_date')
  const today = getTodayStr()
  // 当日已弹出过，直接跳过逻辑
  if (lastShowDate === today) return

  // 原有判断逻辑
  const result = Object.keys(daily).filter(key => keysToCheck.includes(key)).every(key => daily[key].counter > 0);
  if (result) {
    setDisplayTraits(true)
    // 触发弹窗时立刻存储当日日期，避免同天重复触发
    localStorage.setItem('traits_modal_last_show_date', today)
  }
}, [daily]);

3. Modal调用逻辑（补充关闭时的兜底存储） #

<Modal 
  isVisible={displayTraits}
  onBackdropPress={() => {
    setDisplayTraits(false);
    // 兜底：用户手动关闭时也存储日期，避免极端场景下重复弹出
    localStorage.setItem('traits_modal_last_show_date', getTodayStr())
  }}
  onBackButtonPress={() => {
    setDisplayTraits(false);
    localStorage.setItem('traits_modal_last_show_date', getTodayStr())
  }}
>

补充说明 #

如果你的项目是SSR框架（比如Next.js），需要注意localStorage仅在客户端可用，不要在组件初始化阶段直接读取，所有读写操作都放在useEffect内部即可避免报错。如果需要避免用户修改本地时间导致逻辑失效，可以替换前端生成的日期为后端接口返回的服务器日期即可。

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