如何从Firebase读取信息并在React组件中使用？

npm install firebase

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

// 初始化Firebase
const firebaseConfig = {
  // 项目的配置信息
};

firebase.initializeApp(firebaseConfig);

// 读取信息
const database = firebase.database();
const ref = database.ref('路径/到/你的数据');

ref.once('value')
  .then((snapshot) => {
    // 处理读取到的数据
    const data = snapshot.val();
    // 在这里可以对数据进行进一步处理或者在组件状态中保存数据
  })
  .catch((error) => {
    // 处理错误
    console.error(error);
  });

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

  componentDidMount() {
    const database = firebase.database();
    const ref = database.ref('路径/到/你的数据');

    ref.once('value')
      .then((snapshot) => {
        const data = snapshot.val();
        this.setState({ data });
      })
      .catch((error) => {
        console.error(error);
      });
  }

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

    return (
      <div>
        {/* 在这里使用读取到的数据 */}
        {data && <p>{data}</p>}
      </div>
    );
  }
}