错误显示来自 firebase 的数据以做出反应 bootstrap table

Question

我想显示我的 firebase 数据库中的数据以做出反应 bootstrap table。但是，如果刷新后我无法显示实时数据。

这是我的反应组件代码

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import PageHeader from 'react-bootstrap/lib/PageHeader';
import database from './database';

const ref = database.ref('users');
  ref.on('value', gotData, errData); 

const products = [];

function gotData(data) {

  const userdata = data.val();
  const keys = Object.keys(userdata);
  for (let i = 0; i < keys.length; i++) {
    const k = keys[i];
    products.push({
      name: userdata[k].nama, address: userdata[k].address, email: userdata[k].email
    });
  }
}

function errData(err) {
  console.log(err);
}

class Member extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text:''
    };
  }


  handleClick = (rowKey) => {
    alert(this.refs.table.getPageByRowKey(rowKey));
  }

    render(){

    return (
      <div>
          <div className="col-lg-12">
          <PageHeader>Members</PageHeader>
       </div>
        <BootstrapTable  
              ref='table'
            data={ products }
            pagination={ true }
            search={ true }>
          <TableHeaderColumn dataField='name' isKey={true} dataSort={true}>Name</TableHeaderColumn>
            <TableHeaderColumn dataField='address' dataSort={true}>Address</TableHeaderColumn>
            <TableHeaderColumn dataField='email'>Email</TableHeaderColumn>
          </BootstrapTable>
      </div>
    );
    }
}

export default Member;

这是我的初始化数据库代码

import firebase from 'firebase';

const config = {
  apiKey: '......',
  authDomain: '......',
  databaseURL: '....',
  projectId: '....',
  storageBucket: '....',
  messagingSenderId: '....'
};

firebase.initializeApp(config);
const database = firebase.database();


export default database;

帮帮我，谢谢。

Answer 1

当数据发生变化时，您必须告诉组件re-render。我不认为与 firebase 相关的功能应该存在于组件之外。相反，它们应该存在于组件中。你应该做类似下面的事情。希望对你有帮助

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import PageHeader from 'react-bootstrap/lib/PageHeader';
import database from './database';


class Member extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text:'',
      products: []
    };

   this.userRef = database.ref('users');
  }

  componentDidMount() {
    this.userRef.on('value', this.gotData, this.errData); 
  }


  gotData = (data) => {
    let newProducts = []
    const userdata = data.val();
    const keys = Object.keys(userdata);
    for (let i = 0; i < keys.length; i++) {
      const k = keys[i];
      newProducts.push({
        name: userdata[k].nama, address: userdata[k].address, email: userdata[k].email
      });
    }
    this.setState({products: newProducts});
  }

  errData = (err) => {
   console.log(err);
 }

  handleClick = (rowKey) => {
    alert(this.refs.table.getPageByRowKey(rowKey));
  }


render(){

  return (
  <div>
      <div className="col-lg-12">
      <PageHeader>Members</PageHeader>
   </div>
    <BootstrapTable  
        ref='table'
        data={ this.state.products }
        pagination={ true }
        search={ true }>
      <TableHeaderColumn dataField='name' isKey={true} dataSort={true}>Name</TableHeaderColumn>
        <TableHeaderColumn dataField='address' dataSort={true}>Address</TableHeaderColumn>
        <TableHeaderColumn dataField='email'>Email</TableHeaderColumn>
      </BootstrapTable>
    </div>
  );
 }
}

export default Member;

所有 subscription 相关代码都进入 componentDidMount，您必须 unsubscribe 组件将卸载。

错误显示来自 firebase 的数据以做出反应 bootstrap table

error display data from firebase to react bootstrap table

firebase

reactjs

firebase-realtime-database

react-bootstrap-table