Как распечатать список объектов из firebase в реаги?

Question

Я получаю снимок из firebase и настройки в методе setState и в методе рендеринга, я просто хочу напечатать список. Во-первых, потому что firebase возвращает объект, функция карты не работала, и я нашел что-то Array.from (this.state.testList), которое, кажется, работает, но ничего не отображается. Я прикрепляю код и мое дерево Firebase, чтобы вы могли видеть, что я пытаюсь сделать.

25-10-2019: firstPoint: newsDesc: «Крис повышен до Scrum Master!»newsTitle: "Крис повышен !!"secondPoint: newsDesc: «Христодулосу нужно было изменить свою жизнь» newsTitle: «Христодулос уходит»

В приведенном выше коде я получаю снимок «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. У вас есть доступ к идентификатору каждого элемента, что полезно, если вы хотите начать манипулирование элементами.

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>
    )
 }
}