如何在React.js中渲染页面前等待获取完成

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 模拟异步获取数据的过程
    setTimeout(() => {
      const mockData = '这是获取到的数据';
      setData(mockData);
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      {isLoading ? (
        <div>正在加载数据...</div>
      ) : (
        <div>{data}</div>
      )}
    </div>
  );
}

export default App;

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      isLoading: true,
    };
  }

  componentDidMount() {
    // 模拟异步获取数据的过程
    setTimeout(() => {
      const mockData = '这是获取到的数据';
      this.setState({
        data: mockData,
        isLoading: false,
      });
    }, 2000);
  }

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

    return (
      <div>
        {isLoading ? (
          <div>正在加载数据...</div>
        ) : (
          <div>{data}</div>
        )}
      </div>
    );
  }
}

export default App;