Question

我是React和Firebase的新手。我努力从数据库中获取数据，尽管Firebase网站上的说明非常简单。

我设法使用以下代码在视图中打印数据：

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

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密钥分配给对象密钥属性，以便稍后我可以使用密钥。

Answer 2

本机map函数仅适用于数组，因此直接在此对象上使用它将无效。

你可以做的是：

使用map调用对象上的Object.keys()功能：

getInstrumentRows() { const instruments = this.state.instruments; Object.keys(instruments).map((key, index) => { let instrument = instruments[key]; // You can now use instrument.name and instrument.image return <Instrument name={instrument.name} image={instrument.image}/> }); }

或者，您还可以导入lodash库并使用其map方法，这样您就可以将上述代码重构为：

getInstrumentRowsUsingLodash() { const instruments = this.state.instruments; _.map(instruments, (key, index) => { let instrument = instruments[key]; // You can now use instrument.name and instrument.image return <Instrument name={instrument.name} image={instrument.image}/> }); }

旁注：当您从Firebase检索数据时，您尝试直接通过this.state.instruments上的调用更新状态。 React中的state应该被视为不可变的，并且不应该像push那样直接调用它来进行变异。

Answer 3

我会使用地图功能：

_getInstrumentRows() {
    const instruments = this.state.instruments[0];
    if (instruments) {
        return instruments.map((instrument) => 
            <Instrument name={instrument.name}
                        image={instrument.image}/>);
    }
}

在render()方法中，您只需在{_getInstrumentRows()}处使用{。}}。

在没有数组的React中显示Firebase中的数据

3 个答案:

你可以做的是：