2016-08-20 19 views
1

我有一個包含幾個測試項目的實時數據庫中的火力地堡的項目,在這個結構中加載數據:ReactFire不是從實時數據庫

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總是空的,儘管有我的實時數據庫中的項目,我假設它是綁定到componentWillMountthis.state.items陣列。由於文檔從未指定需要將哪個參數傳遞給firebase.database().ref()調用,因此我嘗試了從project/items,project-21093/items和變體到database/data/items的所有內容,但沒有成功。 Chrome開發工具的React插件清楚地顯示了空數組。我錯過了什麼成功加載這些數據?

回答

1

原來,在「實時數據庫」選項卡中的「規則」部分,我需要改變規則了一下:

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

隨着.read設置爲"auth != null"我不能無法訪問任何內容,將其更改爲true最終讓我獲得我的數據。這裏沒有提到任何啓動文檔,所以直到我看到this Firecast video我才知道該怎麼做。我仍然不確定我將如何配置這個適當的Web使用,但至少我現在可以讓我的應用程序與一些數據。