Question

从 firebase 接收数据

2020-02-12

53

javascript arrays reactjs firebase firebase-realtime-database

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

有人知道我如何确保从 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,
    },
  ]

Answer 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 ，使用点符号访问属性。

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