分享一个什么也不是的代码,仅做记录,希望半年后能看到自己是多么的蠢

需求:当又客户接受到消息,30秒后未回复的情况下,将该对话框背景颜色置红,以做警示.

  const [timeClor, setTimeClor] = useState('#fff');
  const [iTimes, setItimes] = useState();
  const Discoloration = () => {
    setTimeClor('#FFEEF1');
    // console.log('我红了');
  };



function startTime() {
    // 当有新的消息时, 清除定时器, 重新计时
    clearTimeout(iTimes);
    const iTime = setTimeout(() => {
      // 讲该对话框背景颜色置红
      Discoloration();
    }, 30000);
    //  用作存计时器的名称,方便清除
    setItimes(iTime);
  }

  // 页面初始化的时候 做判断
  // 由于考虑到客服会手动刷新浏览器, 导致计时器会被主动/被动清掉
  useEffect(() => {
    //  当前会话的 回复状态伟false(未回复) 并且 当前客服不是由
    //  其他客服转接及用户刚排队进入在线客服
    if (
      localStorage.getItem(item.usId) === 'false' &&
      item.lastMessage !== '用户转接人工客服' &&
      item.lastMessage != '将用户转接给客服'
    ) {
      // 直接置红
      Discoloration();
    }
  }, []);

  // 最通过判断收到新消息 选择是否启动定时器
  useEffect(() => {
    // 如果当前会话已经为红色, 则直接return出去
    if (timeClor === '#FFEEF1') {
      return;
    }
    // 如果当前用户的未读条数信息大于0 则开始启动定时器
    // 因为可能后端会返回系统消息,也是在item的lastestMEssage中
    // 所以多做一层判断
    if (item.unReadCount > 0) {
      // 启动定时器
      startTime();
      // 设置localStorage中当前用户状态为未回复
      localStorage.setItem(item.usId, 'false');
    }
  }, [item.lastestMessage]);

  //  通过localStorage判断当前用户的状态是否有改变
  // 因为 发送消息不在这个组件内 所以讲状态信息存到了localStorage中
  // 并且还可以防止刷新清掉状态
  useEffect(() => {
    // 再次判断 是否会话状态已更改为true(已回复)
    if (localStorage.getItem(item.usId) === 'true') {
      // 设置当前会话为正常 白色
      setTimeClor('#fff');
      // 试着清一下计时器,如果有的话
      if (iTimes) {
        clearTimeout(iTimes);
      }
    }
  }, [localStorage.getItem(item.usId)]);