在React中创建加载超时页面

import React, { Component } from 'react';

class TimeoutPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      timeout: false
    };
  }

  componentDidMount() {
    // 设置定时器，超时时间为5秒
    this.timer = setTimeout(() => {
      this.setState({ timeout: true });
    }, 5000);
    
    // 模拟加载数据的异步操作
    fetchData()
      .then(() => {
        // 加载完成，清除定时器
        clearTimeout(this.timer);
        this.setState({ loading: false });
      });
  }

  componentWillUnmount() {
    // 组件卸载时清除定时器
    clearTimeout(this.timer);
  }

  render() {
    const { loading, timeout } = this.state;

    if (loading) {
      return <div>Loading...</div>;
    }

    if (timeout) {
      return (
        <div>
          <p>Load timeout. Please try again.</p>
          <button onClick={() => window.location.reload()}>Reload</button>
        </div>
      );
    }

    return <div>Content loaded successfully.</div>;
  }
}

// 模拟异步加载数据的函数
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(resolve, 3000);
  });
}

export default TimeoutPage;