如何在React中打印Firebase返回的对象列表？

嘿，我来帮你搞定这个问题！你遇到的核心问题是Firebase返回的是嵌套对象而非数组，直接用Array.from()处理普通对象是行不通的，另外你访问对象属性的语法也需要调整——带连字符的键不能用.来访问。

问题根源解析 #

1. Firebase的snap.val()返回的是类似这样的嵌套对象：

   {
     "25-10-2019": {
       firstPoint: { newsDesc: "...", newsTitle: "..." },
       secondPoint: { newsDesc: "...", newsTitle: "..." }
     }
   }
   

2. Array.from()只能处理类数组或可迭代对象，直接套在普通对象上会得到空数组，自然无法渲染内容。
3. 带连字符的键（比如25-10-2019）不能用.语法访问，必须用方括号[]。

解决方案：将对象转换为可遍历的数组 #

我们可以用Object.entries()或Object.values()把Firebase返回的对象转换成数组，再进行渲染。下面是修改后的完整代码：

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: {} // 初始化为空对象，匹配Firebase返回的数据类型
    }
  }

  componentDidMount(){
    this.database.on('value' , snap=> {
      this.setState({
        testList: snap.val() || {} // 处理snap.val()为null的情况，避免后续报错
      });
    });
  }

  render() {
    console.log(this.state.testList);
    // 将日期对象转换为[日期键, 新闻对象]的数组
    const dateEntries = Object.entries(this.state.testList);
    
    return (
      <div>
        {dateEntries.map(([dateKey, newsObj]) => (
          <div key={dateKey}>
            <h3>{dateKey}</h3>
            {/* 把每个日期下的新闻条目转换为数组并渲染 */}
            {Object.values(newsObj).map((newsItem, index) => (
              <p key={index}>
                {newsItem.newsTitle}: {newsItem.newsDesc}
              </p>
            ))}
          </div>
        ))}
      </div>
    )
  }
}

export default printFirebase

代码细节说明 #

• 初始化testList为空对象：更符合Firebase返回的数据类型，避免初始状态和实际数据类型不匹配的问题。
• snap.val() || {}：防止Firebase节点为空时返回null，导致后续遍历出错。
• Object.entries()：获取日期的键和对应的数据对象，这样可以同时展示日期（比如25-10-2019）。
• Object.values(newsObj)：把每个日期下的firstPoint、secondPoint转换为数组，方便用map渲染每条新闻。
• 唯一key属性：给每个map生成的元素加上key，符合React的渲染要求。

简化版：只渲染所有新闻（不显示日期） #

如果你不需要展示日期，只想把所有新闻列出来，可以这样简化：

render() {
  const allNewsItems = [];
  // 遍历所有日期下的新闻，收集到同一个数组里
  Object.values(this.state.testList).forEach(newsGroup => {
    allNewsItems.push(...Object.values(newsGroup));
  });

  return (
    <div>
      {allNewsItems.map((item, index) => (
        <p key={index}>
          {item.newsTitle}: {item.newsDesc}
        </p>
      ))}
    </div>
  )
}

这样就能正常渲染从Firebase获取的所有新闻内容啦！

内容的提问来源于stack exchange，提问作者Decoder2211