1. 使用异步方式提取数据：在组件挂载时，使用异步方法（如async/await）从API中提取数据，这将允许UI渲染在数据请求完成前继续进行。下面是示例代码：

class MyComponent extends React.Component {
  state = { data: null }

  async componentDidMount() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    this.setState({ data });
  }

  render() {
    const { data } = this.state;

    return (
      

        {data ? 
{data}
 : 
Loading...
}
      
    );
  }
}

2. 使用React的suspense和lazy组件：这些组件允许您在数据准备好之前先渲染异步加载的组件。它需要React v16.6或更高版本。下面是示例代码：

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    

      Loading...
}>