如何通过Firebase结果映射Javascript React Native

时间:2017-10-26 11:01:05

标签: javascript reactjs react-native

这是我的firebase抓取功能,我将其存储到inboxMessages变量。

inboxMessageFetch(mobileNumber) {
            return firebase.database().ref(`${mobileNumber}/inbox`)
                .on('value', snapshot => {
                    console.log('FB', snapshot.val());
                    this.inboxMessages = snapshot.val();
                });
    }

以下是从Firebase服务器收到的firebase结果。

Array [
  undefined,
  Object {
    "from": "Joseph's",
    "fromId": 123456,
    "message": "Hello this is important!",
    "time": "10:20AM",
  },
  Object {
    "from": "Anglo",
    "fromId": 123,
    "message": "This message is a test message",
    "time": "10:30PM",
  },
]

我使用getter函数获取inboxMessagesgetInboxMessages

我想在ListView

中显示结果
<List>
          {
            this.props.inboxStore.getInboxMessages.map((l, i) => (
              <ListItem
                key={i}
                leftIcon={{ name: 'user-circle-o', type: 'font-awesome', style: {color: 'blue'} }}
                title={l.from}
                titleStyle={{color: 'red'}}
                subtitle={l.message}
                rightTitle='11:00am'
                rightTitleStyle={{color: 'green'}}
              />
            ))
          }
        </List>

我收到以下错误。 enter image description here

1 个答案:

答案 0 :(得分:2)

更改数据库数据的处理:

this.inboxMessages = snapshot.val();

要:

this.inboxMessages = snapshot.val().filter(v => v);

这将消除undefined之类的任何虚假值,您将不会遇到这种错误。