错误显示来自Firebase的数据以反应引导程序表

Question

我想显示来自我的firebase数据库的数据以反应引导程序表。但是，如果刷新后无法显示实时数据。

这是我的反应组件代码

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当组件将卸载。