Question

我从firebase获取快照，并在setState方法和render方法中进行设置，我只想打印列表。首先，因为firebase返回了一个对象，所以map函数无法正常工作，我发现了Array.from（this.state.testList）似乎可以正常工作，但什么也没显示的情况。我附加了代码和Firebase树，这样您就可以看到我正在尝试做的事情。

25-10-2019： firstPoint： newsDesc：“克里斯被提升为Scrum大师！” newsTitle：“克里斯被提拔了！” secondPoint： newsDesc：“克里斯托杜洛斯（Christodoulos）的生活需要改变” newsTitle：“ Christodoulos即将离开”

在上面的代码中，我获取了“ kabalaNews”的快照，该快照将返回我和带有数据的对象，并且该对象将具有许多其他带有点的对象，并且每个点都有标题和描述。

import React, { Component } from 'react'
import firebase from 'firebase';
import {DB_CONFIG} from './Config';

export class printFirebase extends Component {
 constructor() {
    super()
    this.app = firebase.initializeApp(DB_CONFIG);
    this.database=this.app.database().ref().child('kabalaNews');


    this.state = {
        testList: []
    }
 }

componentDidMount(){
    this.database.on('value' , snap=> {

        this.setState({
            testList:snap.val()
        });
    });
}

render() {
    console.log(this.state.testList);

    return (
        <div>       
           <div>
               {Array.from(this.state.testList).map(news => 
               <p>{news.25-10-2019.newsDesc} {news.25-10-2019.newsTitle} 
               </p>)}
           </div>
        </div>
    )
 }
}

export default printFirebase

Answer 1

您有一些错误：

我实际上将整个快照声明为状态，而不仅仅是值。这样可以确保您能够满足将来必然要满足的两个需求：
1. 这些项目将按照您查询它们的顺序显示，而不是按其键的字母顺序显示。
2. 您可以访问每个项目的ID，一旦您要开始操作这些项目，这将非常有用。
您在news.25-10-2019.newsDesc处使用无效的语法访问属性。 JavaScript标识符不能包含-，因此您需要使用[]表示法来访问值：news["25-10-2019"].newsDesc。

所以总共变成了：

componentDidMount(){
    this.database.on('value' , snap=> {

        this.setState({
            testList:snap
        });
    });
}

render() {
    console.log(this.state.testList);

    return (
        <div>       
           <div>
               {this.state.testList.forEach(news => 
               <p>{news.val["25-10-2019"].newsDesc} {news.val["25-10-2019"].newsTitle} 
               </p>)}
           </div>
        </div>
    )
 }
}

如何在React中从Firebase打印对象列表？

1 个答案: