使用React States实现Alert展示及刷新后状态留存的方案咨询

核心逻辑是通过React state维护所有Alert的可见状态，同时将状态与localStorage自动同步，初始化时优先读取缓存的状态，即可实现刷新页面后未关闭的Alert保持展示的效果。

完整代码示例 #

import { useState, useEffect } from 'react';

// 可替换为你的业务默认Alert配置，每个Alert必须有唯一id作为标识
const DEFAULT_ALERT_LIST = [
  { id: 'maintain_notice', content: '系统将于今日22:00-24:00进行维护', visible: true },
  { id: 'unread_msg_tip', content: '您有5条未审批的申请待处理', visible: true },
  { id: 'bill_notice', content: '本月消费账单已生成，可在个人中心查看', visible: true }
];
// localStorage存储的key，可自定义
const ALERT_STATUS_CACHE_KEY = 'global_alert_visible_status';

function GlobalAlert() {
  // 初始化state：优先读localStorage缓存，读取失败兜底用默认配置
  const [alerts, setAlerts] = useState(() => {
    try {
      const cachedStatus = localStorage.getItem(ALERT_STATUS_CACHE_KEY);
      if (cachedStatus) {
        const parsedStatus = JSON.parse(cachedStatus);
        // 合并默认配置与缓存状态，避免后续新增Alert时缓存无对应数据导致不显示
        return DEFAULT_ALERT_LIST.map(alertItem => ({
          ...alertItem,
          visible: parsedStatus[alertItem.id] ?? alertItem.visible
        }));
      }
    } catch (err) {
      console.warn('Alert状态缓存读取失败，将使用默认配置', err);
    }
    return DEFAULT_ALERT_LIST;
  });

  // 监听Alert状态变化，自动同步到localStorage
  useEffect(() => {
    const statusMap = alerts.reduce((result, item) => {
      result[item.id] = item.visible;
      return result;
    }, {});
    localStorage.setItem(ALERT_STATUS_CACHE_KEY, JSON.stringify(statusMap));
  }, [alerts]);

  // 关闭Alert的处理方法
  const handleClose = (alertId) => {
    setAlerts(prevList => prevList.map(item => 
      item.id === alertId ? { ...item, visible: false } : item
    ));
  };

  return (
    <div className="alert-container">
      {/* 仅渲染可见的Alert */}
      {alerts.filter(alert => alert.visible).map(alert => (
        <div key={alert.id} className="alert-item">
          <p>{alert.content}</p>
          <button className="alert-close-btn" onClick={() => handleClose(alert.id)}>关闭</button>
        </div>
      ))}
    </div>
  );
}

export default GlobalAlert;

实现说明 #

• 完全基于React原生state管理状态，所有状态变更均通过setAlerts触发，符合React单向数据流规范
• 存储的是每个Alert独立的可见状态，和默认Alert配置做合并兼容，后续业务新增Alert不会受老缓存影响
• 增加了异常捕获逻辑，避免浏览器禁用localStorage时页面报错
• 状态同步逻辑封装在useEffect中，无需业务代码手动处理存储，减少冗余

注意事项 #

• 每个Alert必须配置全局唯一的id作为缓存匹配标识，否则会出现状态错乱
• 如果你的Alert是后端接口动态返回的，可以将接口请求逻辑放到初始化阶段，拿到接口返回的Alert列表后再和缓存状态合并即可
• 如果需要增加缓存有效期，可以在存储时额外存入时间戳，初始化时判断超出有效期则直接清空缓存使用最新配置

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