带有React Native的Firebase查询未显示在屏幕上（而是显示在console.log上）

Question

我的数据按预期显示在console.log上，但没有显示在屏幕上。 这是控制台日志的屏幕截图。

这是我的代码：

componentWillMount = () => {
this.getData();
}

getData(){
  const { currentUser } = firebase.auth();
    firebase
    .database()
    .ref(`/users/${currentUser.uid}/data/`)
    .orderByKey()
    .on('child_added', snap =>  {

      //Is this correct or does it need to be formatted a different way?
      snap.key, 
      snap.val().Weight 

      //note that the console logs below displays the data
      console.log(snap.key)
      console.log(snap.val().Weight)

    }) 
}

renderRow = () => {
  return (
    <View style={[styles.card, styles.cardBorderTop]}>
      <Text>
        {snap.key} //Is this the correct way to reference this value?
      </Text>
      <Text style={[styles.textRight]}>
        {snap.val().Weight} //Is this the correct way to reference this value?
      </Text>
    </View>
  )
}

  render() {
    return (
      <View style={[styles.container]}>
        <FlatList
          data={this.getData} //Is this the correct data reference?
          renderItem={this.renderRow} 
        />
      </View>
    );
  }
}

这是我的屏幕呈现方式。请注意，我期望数据呈现在FlatList上。

任何帮助将不胜感激。

另一方面，我现在意识到我需要将日期存储为ISO-8601，以便可以对它们进行正确的排序，在我弄清楚如何获取查询数据以呈现在我的数据库上之后，我将进行此操作屏幕。

更新 我意识到我的问题并没有达到我的预期，对此我深表歉意。我需要的是能够通过 date键和 Weight child 查询我的数据。我可以在控制台上使用snap.key和snap.val（）。Weight成功地做到这一点，但是看起来这不是在FlatList上显示数据所需的正确引用，这就是我需要的帮助。

作为参考，这是我的Firebase数据库：

Answer 1

您的getData函数当前不返回任何内容，因此，尽管视图可能调用getData()，但该函数什么也没返回。

但是仅添加return语句将无济于事，因为数据是异步加载的。在React中，您应该将数据置于组件状态（通过调用setState()），然后在渲染器中从那里使用。

在代码中：

componentWillMount = () => {
  this.setState({ data: [] });
  this.getData();
}

getData(){
  const { currentUser } = firebase.auth();
  firebase
    .database()
    .ref(`/users/${currentUser.uid}/data/`)
    .orderByKey()
    .on('child_added', snap =>  {
      var data = this.state.data;
      data.push({ key: snap.key, weight: snap.val().Weight });
      this.setState({ data: data });
    }) 
}

所以这个：

• 将状态中的data属性初始化为一个空数组。
• 将每个新项添加到来自数据库的data中。

这样，您可以使用以下方式呈现数据数组：

renderRow = ({item}) => {
  return ( 
    <View style={[styles.card, styles.cardBorderTop]}> 
      <Text> 
        {item.key} 
      </Text> 
      <Text style={[styles.textRight]}>
        {item.Weight} 
      </Text>
    </View>
  )
}

render() {
  return (
    <View style={[styles.container]}>
      <FlatList
        data={this.state.data}
        renderItem={this.renderRow} 
      />
    </View>
  );
}

由于我从未使用过FlatList，所以最后一位可能包含语法错误。如有疑问，请与后者here的文档进行比较。