使用react suspense从Firebase异步加载

import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  // 配置参数
};

firebase.initializeApp(firebaseConfig);

async function fetchData() {
  const snapshot = await firebase.database().ref('data').once('value');
  return snapshot.val();
}

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <DataComponent />
      </Suspense>
    </div>
  );
}

export default App;

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

function DataComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then((result) => {
      setData(result);
    });
  }, []);

  return (
    <div>
      {data ? (
        <div>{data}</div>
      ) : (
        <div>Loading data...</div>
      )}
    </div>
  );
}

export default DataComponent;