react定时发送请求

每隔一分钟发送一次请求

每隔一分钟向后端发送请求，更新一次页面上的数据。

关于定时器清除的必要性

react做出的是单页应用，所有的单页应用都应该主动清除定时器。在单页应用里面定时器运行后是存储在内存中的，即使切换了路由页面也没有离开，页面没有离开的话定时器就会继续运行，如果你都不主动清除，那么会产生一些不太好的结果。
与单页应用相反，多页应用不需要清除，这是因为点击一个链接的时候就会打开一个新页面，打开新页面的时候旧页面里面的内存里面的数据都会被清楚了，所以是没事的。

小窍门：短路函数 () && ()

	this.state.data && this.state.data.classrooms.map((item,index)=>{
      console.log(item,index)
      data.push({
        key: index,
        classroom: `${item.buildingNumber}教${item.roomName}`,
        number: item.number
      })
    })

这样写的好处就是，当页面第一次渲染的时候还是拿不到数据的，如果没有数据你就乱渲染那肯定是会出错的，当没有拿到数据的时候就短路掉不执行，拿到了数据以后再执行，这样就不会出错就可以正常渲染数据了。这也提醒了我一定要好好地学习react的生命周期。

具体实现代码：

export default class EmptyClassroom extends React.Component {
  state = {
  }

  //请求数据
  getMessage = () => {
    axios.get("http://请求的API")
      .then((res) => {
      	//打印出请求的内容好为后期的渲染做准备
        console.log('res:', res.data.resultInfo)
        this.setState({
          data: res.data.resultInfo
        })
      }).catch(() => {
        console.log("error")
      })
  }

//在页面加载完的时候设置一个定时器
  componentDidMount() {
    this.getMessage()
    this.interval = setInterval(() => this.getMessage(), 60000);
  }

  //组件销毁的时候清除定时器就行
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    let data = []
    //短路，如果一开始没有data的话就短路掉不执行
    //封装表格中需要的数据
    this.state.data && this.state.data.classrooms.map((item,index)=>{
      console.log(item,index)
      data.push({
        key: index,
        classroom: `${item.buildingNumber}教${item.roomName}`,
        number: item.number
      })
    })
    const colums = [
      {
        title: '教室',
        dataIndex: 'classroom',
        key: 'classroom',
      },
      {
        title: '人数',
        dataIndex: 'number',
        key: 'number'
      }
    ]
    
    return (
      <div style={{ width: '40%', margin: '100px auto' }}>
        <Table bordered columns={colums} dataSource={data} />
      </div>
    )
  }
}