javascript - React/Firebase 错误 : Cannot read property 'database' of undefined

Question

作为前言，我刚刚开始深入研究 React.js，所以解决方案可能很简单。

我正在将 React.js 与 firebase 和 react-router 结合使用，用于一个带有发布文本表单的基本多页面网站。在 TicketList 页面上，我尝试向 Firebase 发送数据，这有效，但是当我转到另一个页面并返回 TicketList 页面时，我得到错误:TypeError:无法读取未定义的属性“数据库”。

从我遵循的教程中，代码是相同的，除了我的所有 TicketList 代码都在 App.js 上，因为教程没有反应-路由器。不确定这个结构是否与这个问题有关。本教程也没有 if (!firebase.apps.length) 内的 this.app = firebase.initializeApp(DB_CONFIG); ，但没有那一点我得到错误:名为“[DEFAULT]”的 Firebase 应用已存在。

如果我将 this.database = this.app.database().ref().child('tickets'); 放在 if (!firebase.apps.length) 内 我收到错误:TypeError: Cannot read property 'on' of undefined，但现在我认为我偏离了原来的问题太远，而且我认为我的理解已经偏离。有人给我一些指导吗？谢谢!

结构:

src 
    > components 
    > config
      > config.js
    > routes
      > About.js
      > TicketList.js
      > index.js
    > App.js

TicketList.js:

import React, { Component } from 'react';
import Ticket from '../components/Ticket.js'
import TicketForm from '../components/TicketForm.js'
import { DB_CONFIG } from '../config/config.js';
import firebase from 'firebase/app';
import 'firebase/database';

// CSS
import '../assets/css/TicketList.css';
import '../assets/css/App.css';

class TicketList extends Component {
  constructor(props){
    super(props);
    this.addTicket = this.addTicket.bind(this);
    this.removeTicket = this.removeTicket.bind(this);
    if (!firebase.apps.length) {
      this.app = firebase.initializeApp(DB_CONFIG);
      this.database = this.app.database().ref().child('tickets');
    }

    // We're going to setup the React state of our component
    this.state = {
      tickets: [],
    }
  }

  componentWillMount(){
    const previousTickets = this.state.tickets;

    // DataSnapshot
    this.database.on('child_added', snap => {
      previousTickets.push({
        id: snap.key,
        ticketContent: snap.val().ticketContent,
      })

      this.setState({
        tickets: previousTickets
      })
    })

    this.database.on('child_removed', snap => {
      for(var i=0; i<previousTickets.length; i++){
        if(previousTickets[i].id === snap.key){
          previousTickets.splice(i, 1);
        }
      }

      this.setState({
        tickets: previousTickets
      })
    })
  }

  addTicket(ticket){
    this.database.push().set({ ticketContent: ticket });
  }

  removeTicket(ticketId){
    this.database.child(ticketId).remove();
  }

  render() {
    return (
      <div>
        <div className="m-container">
          <h1>Open Questions</h1>
          <hr/>
        </div>
        <div>
        {
          this.state.tickets.map((ticket) => {
              return (
                <Ticket 
                ticketContent={ticket.ticketContent} 
                ticketId={ticket.id} 
                key={ticket.id} 
                removeTicket={this.removeTicket} />
              )
          })
        }

        </div>
        <div>
          <TicketForm addTicket={this.addTicket} />
        </div>
      </div>
    );
  }
}

export default TicketList;

Answer 1

问题出在这里:

this.app = firebase.initializeApp(DB_CONFIG);
this.database = this.app.database().ref().child('tickets');

firebase.initialize 是异步的，这就是为什么 this.app 在您引用它时尚未定义。

相反，请尝试:

firebase.initializeApp(DB_CONFIG);
this.database = firebase.database().ref().child('tickets');