从Firebase读取数据并将其保存到Array - React中

npm install firebase

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

// Firebase配置
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

// 初始化Firebase
firebase.initializeApp(firebaseConfig);

// 获取Firebase数据库引用
const database = firebase.database();

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

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

  useEffect(() => {
    // 从Firebase读取数据
    const fetchData = async () => {
      const snapshot = await database.ref('your-data-path').once('value');
      const firebaseData = snapshot.val();
      
      // 将数据保存到Array
      const dataArray = Object.keys(firebaseData).map(key => ({
        id: key,
        ...firebaseData[key],
      }));
      
      setData(dataArray);
    };

    fetchData();
  }, []);

  return (
    <div>
      {/* 使用从Firebase读取的数据 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default MyComponent;