从 Firebase 接收数据答案

【问题标题】：Recieve data from firebase从 Firebase 接收数据
【发布时间】：2020-02-12 11:58:21
【问题描述】：

我正在试验 React 和 firebase。我有一个功能，当组件被加载时，数据库被读出。连接有效，我收到数据。但是，它们是对象，我想将其结构化放置在稍后将被读出的数组中。我只收到当前代码的错误： TypeError：无法读取属性“标题”或未定义

有谁知道我如何确保从 Firebase 收到的数据：

数据库：

使用此代码：

const newEvents = [];

useEffect(() => {
    let ref = Firebase.database().ref('/events');
    ref.on('value' , snapshot => {
        var state = snapshot.val();
        let arrayCount = loopStateEvents(state);
        console.log(state);

        for(var i = 0; i < arrayCount; i++){

            newEvents.push({title: state[i].title, id: state[i].id, resourceId: state[i].resourceId,start: new Date(state[i].yearStart,state[i].monthStart,state[i].dayStart,state[i].hourStart,state[i].minuteStart,state[i].secondStart),end: new Date(state[i].yearStart,state[i].monthStart,state[i].dayStart,state[i].hourEnd,state[i].minuteEnd,state[i].secondEnd)});
            //setEventDb([...eventDb,{title: state[i].title, id: state[i].id, resourceId: state[i].resourceId,start: new Date(state[i].yearStart,state[i].monthStart,state[i].dayStart,state[i].hourStart,state[i].minuteStart,state[i].secondStart),end: new Date(state[i].yearStart,state[i].monthStart,state[i].dayStart,state[i].hourEnd,state[i].minuteEnd,state[i].secondEnd)}]);
        }


    });
},[] );

const loopStateEvents = function(object){
   var length = 0;
  for( var key in object ) {
      if( object.hasOwnProperty(key) ) {
          ++length;
      }
  }
  return length;
}

可以确保我得到一个结构如下的数组：

const events = [
    {
      id: 0,
      title: 'Board meeting',
      start: new Date(2020, 1, 10, 9, 0, 0),
      end: new Date(2020, 1, 10, 9, 15, 0),
      resourceId: 1,
    },
    {
      id: 1,
      title: 'MS training',
      desc: 'this is a test',
      start: new Date(2020, 1, 10, 9, 0, 0),
      end: new Date(2020, 1, 10, 9, 15, 0),
      resourceId: 2,
    },
    {
      id: 1,
      title: 'MS training',
      start: new Date(2020, 1, 10, 9, 10, 0),
      end: new Date(2020, 1, 10, 9, 25, 0),
      resourceId: 2,
    },
    {
      id: 2,
      title: 'Team lead meeting',
      start: new Date(2018, 0, 29, 8, 30, 0),
      end: new Date(2018, 0, 29, 12, 30, 0),
      resourceId: 3,
    },
    {
      id: 11,
      title: 'Birthday Party',
      start: new Date(2018, 0, 30, 7, 0, 0),
      end: new Date(2018, 0, 30, 10, 30, 0),
      resourceId: 4,
    },
  ]

【问题讨论】：

标签： javascript arrays reactjs firebase firebase-realtime-database

【解决方案1】：

执行以下操作：

let ref = Firebase.database().ref('/events');
    ref.on('value' , snapshot => {
        snapshot.forEach((childSnap) => {
        let state = childSnap.val());
        console.log(childSnap);
            newEvents.push({title: state.title, id: state.id, resourceId: state.resourceId,start: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourStart,state.minuteStart,state.secondStart),end: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourEnd,state.minuteEnd,state.secondEnd)});          
    });

使用forEach 在数组内部进行迭代，然后使用childSnap，使用点符号访问属性。

【讨论】：

【解决方案2】：

useEffect(() => {
    let ref = Firebase.database().ref('/events');
    ref.on('value' , snapshot => {
        var state = snapshot.val();
        let events = []
        for (var key in state) {
          events.push(state[key]);
        }
    });
},[] );

使用for (var key in state)，这样你就可以直接使用从firebase返回的对象并推入你的事件数组，而不需要对象的长度。您可以通过以下方式添加自定义属性：

state[key].start = new Date(state[key].yearStart,state[key].monthStart,state[key].dayStart,state[key].hourStart,state[key].minuteStart,state[key].secondStart)

【讨论】：