【问题标题】:ReactFire isn't loading data from Realtime DatabaseReactFire 没有从实时数据库加载数据
【发布时间】:2016-08-20 03:32:52
【问题描述】:

我有一个带有实时数据库的 Firebase 项目,其中包含一些测试项目,结构如下:

project-21093
|_items
  |_item1
    |_name: "Name"
    |_category: "Category"
  |_item2
    |_name: "Name2"
    |_category: "Category:

我的index.html 文件包含<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script> 标签,这是我的index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import firebase from 'firebase/app';
require("firebase/auth");
require("firebase/database");
import ReactFireMixin from 'reactfire';
require("./styles/customisations.scss");

// Initialize Firebase
var config = {
  apiKey: "key",
  authDomain: "auth",
  databaseURL: "url",
  storageBucket: "storage",
};
firebase.initializeApp(config);

var App = React.createClass({
  mixins: [ReactFireMixin],

  getInitialState: function() {
    return {
      items: []
    };
  },

  componentWillMount: function() {
    var fireRef = firebase.database().ref("items");
    this.bindAsArray(fireRef, "items");
  },

  render: function() {}
})

整个config 部分直接取自项目页面给我的内容。它没有按照指示在index.html 中工作,所以我在这里加载了它。我不确定到底需要哪些要求,所以我加载了一堆。

我的问题是 this.state.items 始终为空,尽管我的实时数据库中有项目,我认为这些项目应该绑定到 componentWillMount 中的 this.state.items 数组。由于文档从未指定需要将什么参数传递给firebase.database().ref() 调用,我尝试了从project/itemsproject-21093/itemsdatabase/data/items 的所有变体,但均未成功。 Chrome 开发工具的 React 插件清楚地向我显示了空数组。为了成功加载这些数据,我缺少什么?

【问题讨论】:

    标签: javascript reactjs firebase firebase-realtime-database reactfire


    【解决方案1】:

    事实证明,在“实时数据库”选项卡的“规则”部分,我需要稍微更改规则:

    {
      "rules": {
        ".read": true,
        ".write": "auth != null"
      }
    }

    .read 设置为"auth != null" 我无法访问任何内容,将其更改为true 终于让我获得了我的数据。在任何启动文档中都没有提到这一点,所以直到我看到this Firecast video 我才知道该怎么做。我仍然不确定如何配置它以正确使用网络,但至少我现在可以使用一些数据制作我的应用程序。

    【讨论】:

      猜你喜欢
      • 2021-01-24
      • 1970-01-01
      • 1970-01-01
      • 2019-11-13
      • 2017-02-01
      • 2011-10-04
      • 1970-01-01
      • 2017-05-20
      • 2019-08-17
      相关资源
      最近更新 更多