如何在反应中打印来自firebase的对象列表？

Question

我正在从 firebase 获取快照并在 setState 方法和 render 方法中进行设置，我只想打印列表。首先，因为 firebase 正在返回一个对象，所以 map 函数没有工作，我发现了一些 Array.from(this.state.testList) 似乎工作但没有显示的东西。我附上了代码和我的 firebase 树，这样你就可以看到我在做什么。

25-10-2019: 第一点： newsDesc：“Chris 晋升为 Scrum Master！” 新闻标题：“克里斯升职了！！” 第二点： newsDesc：“克里斯托杜洛斯需要改变他的生活” 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. 我实际上会将整个快照声明为状态，而不仅仅是值。这可确保您能够满足您未来必然会遇到的两个需求：

   1. 项目将按您查询它们的顺序显示，而不是按其键的字母顺序显示。

   2. 您可以访问每个项目的 ID，这在您想要开始操作项目时很有用。

2. 您在此处使用了无效的语法来访问属性：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>
    )
 }
}