reactjs - base.database() 不是 firebase 中的函数错误与 react

Question

我已经让我的应用程序的身份验证部分可以与 Google 一起使用，但之后我无法获取要使用的数据库数据的快照。

我想登录，收集用户信息，如果没有数据所有者，则将当前用户设置为所有者。

这是身份验证片段

  login() {
    auth.signInWithPopup(provider)
      .then((result) => {
        const user = result.user;
        this.setState({
          user
        });
    });
    const storeRef = base.database().ref(this.props.storeId);
    storeRef.once("value")
      .then((snapshot) => {
        const data = snapshot.val() || {};
        if(!data.owner) {
          storeRef.set({
            owner: this.user
          });
        }
    });
  }

和完整的组件

import React from 'react';
import AddFishForm from './AddFishForm';
import PropTypes from 'prop-types';
import base, { auth, provider } from '../base';
import * as firebase from 'firebase';

export default class Inventory extends React.Component {
  constructor() {
    super();
    this.renderInventory = this.renderInventory.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.renderLogin = this.renderLogin.bind(this);
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.state = {
      user: null,
      owner: null
    }
  }

  handleChange(e, key) {
    const fish = this.props.fishes[key];
    const updatedFish = {
      ...fish,
      [e.target.name]: e.target.value
     }
     this.props.updateFish(key, updatedFish);
  }

  login() {
    auth.signInWithPopup(provider)
      .then((result) => {
        const user = result.user;
        this.setState({
          user
        });
    });
    const storeRef = base.database().ref(this.props.storeId);
    storeRef.once("value")
      .then((snapshot) => {
        const data = snapshot.val() || {};
        if(!data.owner) {
          storeRef.set({
            owner: this.user
          });
        }
    });
  }

  logout() {

  }

  renderLogin() {
    return (
      <nav className="login">
        <h2>Inventory</h2>
        <p>Sign in to manage your store's inventory</p>
        <button className="facebook" onClick={() => this.login()}>
          Log in with Google</button>
      </nav>
    )
  }

    renderInventory(key) {
      const fish = this.props.fishes[key];
        return(
            <div className="fish-edit" key={key}>
                <input type="text" name="name" value={fish.name} placeholder="Fish Name"
                  onChange={(e) => this.handleChange(e, key)} />
                <input type="text" name="price" value={fish.price} placeholder="Fish Price"
                  onChange={(e) => this.handleChange(e, key)} />
                <select type="text" name="status" value={fish.status} placeholder="Fish Status"
                  onChange={(e) => this.handleChange(e, key)}>
                  <option value="available">Fresh!</option>
                  <option value="unaivilable">Sold Out!</option>
                </select>
                <textarea type="text" name="desc" value={fish.desc} placeholder="Fish Desc"
                  onChange={(e) => this.handleChange(e, key)}></textarea>
                <input type="text" name="image" value={fish.image} placeholder="Fish Image"
                  onChange={(e) => this.handleChange(e, key)}/>
                <button onClick={() => this.props.removeFish(key)}>Remove Fish</button>
            </div>
        );
    }

    render() {
      const logout = <button>Log out!</button>

      if(!this.state.uid) {
        return <div>{this.renderLogin()}</div>
      }
      if(this.state.uid !== this.state.owner) {
        return(
          <div>
            <p>Sorry, you are not the owner of this store!</p>
            {logout}
          </div>
        )
      }
        return(
            <div>
                <h2>Inventory</h2>
                {logout}
                {Object.keys(this.props.fishes).map(this.renderInventory)}
                <AddFishForm addFish={this.props.addFish} />
                <button onClick={this.props.loadSamples}>Load Sample Fishes</button>
            </div>

        )
    }
}

Inventory.propTypes = {
updateFish: PropTypes.func.isRequired,
fishes: PropTypes.object.isRequired,
removeFish: PropTypes.func.isRequired,
addFish: PropTypes.func.isRequired,
loadSamples: PropTypes.func.isRequired,
storeId: PropTypes.string.isRequired
}

如果需要，也可以将 firebase 对象作为基础

import Rebase from 're-base';
import * as firebase from 'firebase';

const app = firebase.initializeApp({
  apiKey: "AIzaSyC1UGLssKKLkKvYRp02zYVpM1-D88czp7I",
  authDomain: "catch-of-the-day-ethan-fie.firebaseapp.com",
  databaseURL: "https://catch-of-the-day-ethan-fie.firebaseio.com",
  projectId: "catch-of-the-day-ethan-fie",
  storageBucket: "catch-of-the-day-ethan-fie.appspot.com",
});

const base = Rebase.createClass(app.database());

export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export default base;

Answer 1

您使用Rebase实例不是 firebase实例，到 修复 您的问题从初始化代码中导出 firebase 实例

import Rebase from 're-base';
import * as firebase from 'firebase';

const app = firebase.initializeApp({
  apiKey: "AIzaSyC1UGLssKKLkKvYRp02zYVpM1-D88czp7I",
  authDomain: "catch-of-the-day-ethan-fie.firebaseapp.com",
  databaseURL: "https://catch-of-the-day-ethan-fie.firebaseio.com",
  projectId: "catch-of-the-day-ethan-fie",
  storageBucket: "catch-of-the-day-ethan-fie.appspot.com",
});

const base = Rebase.createClass(app.database());

export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export const firebase = app;    //   <------ export firebase
export default base;

并在您的组件中导入 firebase

import base, { auth, provider , firebase } from '../base';

现在使用 firebase而不是 base

const storeRef = firebase.database().ref(this.props.storeId);
storeRef.once("value")
  .then((snapshot) => {
    const data = snapshot.val() || {};
    console.log(data);
    if(!data.owner) {
      storeRef.set({
        owner: this.user
      });
    }
});