database - 在没有数组的情况下在 React 中显示来自 Firebase 的数据

Question

我是 React 和 Firebase 的新手。尽管 Firebase 网站上的说明非常简单，但我在从数据库中获取数据时遇到了一些困难。

我设法使用这段代码在 View 中打印数据:

从数据库中获取数据并将其保存在状态中:

INSTRUMENTS_DB.once('value').then(function(snapshot) {
        this.state.instruments.push(snapshot.val());
        this.setState({
            instruments: this.state.instruments
        });

我从 Firebase 收到包含多个对象的对象，这些对象对应于不同的工具，如以下代码段所示:

Object {
    Object {
        name: "Electric guitar",
        image: "img/guitar.svg"
    }
    Object {
        name: "Bass guitar",
        image: "img/bass.svg"
    }
    // and so on..
}

目前，我通过填充这样的数组来打印数据:

var rows = [];
    for (var obj in this.state.instruments[0]) {
        rows.push(<Instrument name={this.state.instruments[0][obj].name}
                              image={this.state.instruments[0][obj].image}/>);
    }

我觉得有更好的方法，有人可以给个提示吗？谢谢

Answer 1

我经常使用 firebase 而 mu 解决方案很少有 ES6 辅助函数

const toArray = function (firebaseObj) {

return Object.keys(firebaseObj).map((key)=> {
    return Object.assign(firebaseObj[key], {key});
})

};

我还将 firebase key 分配给对象 key 属性，以便稍后我可以使用这些 key 。