React.js + Firebase：如何在BootstrapTable中展示数据

没问题，我来一步步帮你实现从Firebase拉取数据并在你的BootstrapTable里展示的功能。下面是具体的步骤和修改后的代码：

1. 准备Firebase依赖与配置 #

首先确保你已经安装了Firebase包，若还未安装，在项目根目录运行：

npm install firebase

接着在组件文件中导入Firebase并初始化（替换成你自己Firebase项目的配置，这些信息可在Firebase控制台的项目设置中找到）：

import firebase from 'firebase/app';
// 若使用实时数据库导入这个；若用Firestore则导入'firebase/firestore'
import 'firebase/database';

// 替换为你的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
};

// 避免重复初始化Firebase实例
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

2. 修改Table1组件，添加数据获取逻辑 #

你的原组件依赖props传入数据，现在我们让组件自主从Firebase获取并管理数据。修改后的完整组件代码如下：

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  // 你的Firebase配置
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

class Table1 extends Component {
  constructor(props) {
    super(props);
    // 初始化状态存储表格数据
    this.state = {
      tableData: []
    };
  }

  componentDidMount() {
    // 指向Firebase实时数据库的目标节点，这里假设数据存在`items`节点下
    const dbRef = firebase.database().ref('items');

    // 监听数据变化，实时更新表格
    dbRef.on('value', (snapshot) => {
      const rawData = snapshot.val();
      if (rawData) {
        // Firebase返回键值对对象，转换为BootstrapTable需要的数组格式
        const formattedData = Object.keys(rawData).map(key => ({
          id: key, // 若数据本身有id字段，可替换为rawData[key].id
          name: rawData[key].name,
          value: rawData[key].value
        }));
        this.setState({ tableData: formattedData });
      } else {
        // 数据库无数据时设置空数组
        this.setState({ tableData: [] });
      }
    });
  }

  componentWillUnmount() {
    // 组件卸载时取消监听，防止内存泄漏
    firebase.database().ref('items').off();
  }

  render() {
    return (
      <div>
        <BootstrapTable data={this.state.tableData}>
          <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>名称</TableHeaderColumn>
          <TableHeaderColumn dataField='value'>数值</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Table1;

3. 若使用Firestore而非实时数据库 #

如果数据存储在Firestore中，只需将componentDidMount和componentWillUnmount的代码替换为：

componentDidMount() {
  // 监听Firestore集合数据变化
  this.unsubscribe = firebase.firestore().collection('items').onSnapshot((snapshot) => {
    const formattedData = snapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data() // 展开文档中的name、value字段
    }));
    this.setState({ tableData: formattedData });
  });
}

componentWillUnmount() {
  // 取消Firestore监听
  this.unsubscribe();
}

重要注意事项 #

• 数据库安全规则：开发阶段可暂时设置为公开读写（allow read, write: if true;），但上线前务必修改为符合业务需求的安全规则，避免数据泄露。
• 字段匹配：确保Firebase中的数据字段（name、value）与TableHeaderColumn的dataField完全一致，否则表格会显示空内容。
• 实时更新：上述代码使用了实时监听方法，数据变化时表格会自动更新；若只需一次性获取数据，可改用once（实时数据库）或get（Firestore）方法。

内容的提问来源于stack exchange，提问作者jj.badweyn