在react中， 当你排除其他props更新两次 且在你运行的时候构造函数和render函数都只调用的了一次，而componentDidMount函数却在后面连续执行了两次，只需要在index.tsx文件中把严格模式组件 React.StrictMode给删掉就可以了， 这是一个经典的问题。
但是目前为什么其会导致componentDidMount函数重复调用，博主还不知道为什么， 因为在博主这次实践中、构造函数和render函数都只调用了一次，只有componentDidMount连续调用了两次。

import React, {Component} from 'react'
import { Button, message } from 'antd';
import { Navigate} from 'react-router-dom'
import axios from 'axios'
import './style.css'
import echarts from 'echarts'
import ReactECharts from 'echarts-for-react';
interface State {
  isLogin: boolean;
  loaded: boolean;
}

interface Novel {
  title: string;
  content: string;
}

interface Data {
  [key: string] : Novel[];
}

class Home extends Component<{}, State>{
  constructor(props: {}) {
    super(props);
    this.state = {
      isLogin: true,
      loaded: false,
    }
    console.log('3333333');
  }

  componentDidMount () { //生命周期函数
    console.log('88888');
    // axios.get('/api/isLogin').then(res => {
    //   if(!res.data?.data) {  // .?可选链
    //     this.setState({
    //       isLogin: false,
    //       loaded: true
    //     });
    //   } else{
    //     this.setState({
    //       loaded: true
    //     });
    //   }
    // });

    // axios.get('/api/showData').then(res => {
    //   if(res.data?.data) {  // .?可选链
    //     console.log(res.data.data);
    //   } 
    // });

  }
  componentWillUnmount () {
    console.log('99999');
  }

  handleLogoutClick = () => {
    axios.get('/api/logout').then(res => {
      if(res.data?.data) {
        this.setState({
          isLogin: false
        });
      } else {
        message.error("退出失败")
      }
    })
  }
  handleCrawllerClick = () => {
    axios.get('/api/getData').then(res => {
      if(res.data?.data) {
        message.success('爬取成功')
      } else {
        message.error("爬取失败")
      }
    })
  }

  getOption: () => echarts.EChartsOption = () => {
    return  {
      title: {
        text: '小说展示'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
  }
  render(): React.ReactNode {
    const { isLogin, loaded } = this.state;
    console.log('2222');
    if(isLogin) {
      console.log(loaded, isLogin);
      if(loaded) {
        return (
          <div className='home-page'>
            <div className="buttons">
            <Button type ='primary' style ={{marginRight: '25px'}} onClick={this.handleCrawllerClick}>爬取</Button>
            <Button type ='primary'>展示</Button>
            {/* <Button type ='primary' onClick={this.handleLogoutClick}>退出</Button> */}
            </div>
            
            <ReactECharts option={this.getOption()} />
          </div>
        );
      }
      return null;
    }
   return  <Navigate to = "/login"/>;
  }

};

export default Home;