antd Class组件 发起请求PC端 清除定时器

import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form, Input, Select, Row, Col } from 'antd';
import styles from './waitingScreen.less';
import circle from '../../../assets/waiting/circle.gif';
import person from '../../../assets/waiting/person.png';
import { GetSerialNumberList } from '../../../services/waiting';

@Form.create()
// 修饰器只能放在类的前面
@connect(({ waiting }) => {
  return {
    waiting,
  };
})
class Waiting extends Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      listData: [],
      currentPerson: {},
      getTimer: '',
    };
  }

  getSerialNumberList = (page = 1, pageSize = 6) => {
    GetSerialNumberList({
      OrderBy: '',
      Page: page,
      ItemsPerPage: pageSize,
      SerialNumberStatus: 1001,
    }).then(res => {
      if (res && res.Details) {
        this.setState({
          listData: res.Details.slice(1) || [],
          currentPerson: res.Details[0] || {},
        });
      }
    });
  };

  componentDidMount() {****************************************
    this.getSerialNumberList();
    const timer = setInterval(() => {
      this.getSerialNumberList();
    }, 10000);
    window.onbeforeunload = () => {
      clearInterval(timer);
    };
  }

  render() {
    const { listData, currentPerson } = this.state;

    return (
      <div className={styles.pageContainer}>
        <div className={styles.watingImgBox}>
          <img src={circle} className={styles.waitingImg} />
          <div className={styles.currentPerson}>
            <div className={styles.count}>{currentPerson.SerialNumer}</div>
            <div className={styles.staffName}>{currentPerson.StaffName} </div>
          </div>
          <p className={styles.handle}>正在办理</p>
        </div>
        <div className={styles.waitingBox}>
          <div className={styles.waitingListTitle}>
            <img src={person} className={styles.personIcon} alt="" />
            排队中
          </div>
          <Row gutter={40} className={styles.waitingList}>
            {listData.map(item => {
              return (
                <Col className={styles.staffItem} key={item.Id}>
                  <span className={styles.staffNum}>{item.SerialNumer}</span>
                  <span className={styles.staffName}>{item.StaffName}</span>
                </Col>
              );
            })}
          </Row>
        </div>
      </div>
    );
  }
}

export default connect()(Waiting);