Question

无法从 firebase 获取数据

2020-08-16

104

javascript reactjs firebase

我无法从 firebase 获取数据。Firebase.js 用于初始化 firebase，我在 App.js 中尝试获取并使用它。现在，当我尝试获取数据并在浏览器中显示它时，我只看到空白页。看起来我没有得到任何数据。出于某些原因，我甚至无法从 stocksRef.on('value', (dataSnapshot) 控制台登录，我无法检查我得到了什么数据以及我是否得到了它。请帮我修复它。

App.js

class StocksList extends Component {
    constructor(props){
        super(props);
        this.state = {
            stocks: []
        }
    }

    componentDidMount() {
        const stocksRef = firebase.database().ref('list');
        console.log('popopok', stocksRef)
        stocksRef.on('value', (dataSnapshot) => {
            let list = dataSnapshot.val();
            this.setState({
                stocks: Object.values(list)
            })
        })
    }

    render() {
        return (
            <div>
                {this.state.stocks.map((item) => {
                    return (
                        <div>
                            <p>ISIN: {item.isin}</p>
                            <p>issuer: {item.issuer}</p>
                            <p>issuerCode: {item.issuerCode}</p>
                            <p>ISIN: {item.isin}</p>
                            <p>nominal: {item.nominal} {item.currency}</p>
                            <p>form: {item.form}</p>
                            <p>vyd: {item.vyd}</p>
                        </div>
                    )
                })}
            </div>

        )
    }
}

export default StocksList;

firebase.js

import firebase from 'firebase'

let config = {
    apiKey: ******,
    authDomain: ******,
    databaseURL: ******,
    projectId: ******,
    storageBucket: ******,
    messagingSenderId: ******,
    appId: ******
};

firebase.initializeApp(config);

export default firebase;

Answer 1

You need to make access permission rules at firebase console.

据我所知，您需要 制定一些规则 来访问 Firebase 实时数据库中的数据。
如果您想了解 Firebase 权限规则，请阅读我的参考

您可以使用下一个代码的错误进行检查

try{
 stocksRef.on('value', (dataSnapshot) => {
            let list = dataSnapshot.val();
            this.setState({
                stocks: Object.values(list)
            })
        })
} catch(error) {
             console.log(error);
}

参考

数据库规则 - Firebase 文档

Answer 2

这样尝试

async componentDidMount() {
        const stocksRef = await firebase.database().ref('list');
        console.log('popopok', stocksRef)
        stocksRef.on('value', (dataSnapshot) => {
            let list = dataSnapshot.val();
            this.setState({
                stocks: Object.values(list)
            })
        })
    }