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과 관련된 기능이 구성 요소 외부에서 살아야한다고 생각하지 않습니다. 대신 구성 요소 내에 있어야합니다. 당신은 아래와 같이해야합니다. 이 모든 subscription 관련 코드가 componentDidMount로 전환

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; 

도움이되기를 바랍니다 및 구성 요소가 마운트 해제 할 때 unsubscribe에 있습니다.