react+umi+ant 后台消息提示悬浮框

这次主要写的就是在components/GlobalHeader/AvatarDropDown.jsx和utils/axios.js

初始状态

报错后效果

点击铃铛后，右上角数字消失

由于我这边ERROR返回的时候设置了相应的格式，所以你们直接套用可能并不会有这种效果

更新：更新后可单条记录删除
点击清除后

并且该消息提示可以一直悬浮于屏幕右上角位置，个人感觉效果挺满意的

更新：但是用localstorage会造成很大的卡顿感，所以转成用window挂载变量的形式，再添加判断，减少不必要的计算

更新：添加bellmessage.jsx,使用hooks

bellmessage.jsx

import React, {
    useEffect,useState } from 'react';
import {
   Badge,Button,Card,Affix,List  } from 'antd';
import {
   BellOutlined, CloseOutlined,ClearOutlined,CloseCircleOutlined,ExclamationCircleOutlined} from '@ant-design/icons'

function BellMessage(props) {
   
  const [AffixVisible, setAffixVisible] = useState(false);
  const [refreshinterval, setrefreshinterval] = useState(Number);
  const [newmessagecount, setnewmessagecount] = useState(Number);
  const [oldmessagecount, setoldmessagecount] = useState(Number);
  const [data, setdata] = useState([]);

  useEffect(() => {
   
    if(window.bellmessage==undefined || window.bellmessageNumber==undefined || window.bellmessage==null || window.bellmessageNumber==null){
   
      window.bellmessage=JSON.stringify([]);
      window.bellmessageNumber=0;
      //挂载变量，但react无法监听window变量变化，所以还是要添加定时器刷新
    };
    if (refreshinterval != null) {
   
      clearInterval(refreshinterval);
      setrefreshinterval(null);
    }
    setInterval(bellmessageNumberefresh,2000)
    setdata([]);
    setnewmessagecount(0);
    setoldmessagecount(0);
  }, []);

  useEffect(()=>{
   
    setnewmessagecount(window.bellmessageNumber);
    if(AffixVisible)