javascript - Firebase query with React Native not showing on my screen (but showing on console.log)

Question

My data is showing on console.log as intended but not on my screen. Here's a screenshot of the console log.

And here's my code:

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>
    );
  }
}

This is how my screen is rendering. Note that I'm expecting the data to render on a FlatList.

Any help will be greatly appreciated.

On a side note, I now realize that I need to store the dates as ISO-8601, so they can be sorted properly, which I'll be doing after I figure out how to get the query data to render on my screen.

UPDATE I realize that my question is not as clear as I had intended and I apologize for that. What I need is to be able to query my data by the date key and the Weight child. I'm able to successfully do that using snap.key and snap.val().Weight on the console, however it doesn't look like that's the correct reference needed to display the data on my FlatList and that's what I need help with.

For reference, here's my Firebase database:

标签： javascriptfirebasereact-nativefirebase-realtime-database

Answer 1

Your getData function currently doesn't return anything, so while the view may call getData() it gets nothing back from it.

But simply adding a return statement will not help, since the data is loaded asynchronously. In React you should instead put the data in the state of your component (by calling setState()) and then use it from there in your renderer.

In code:

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 });
    }) 
}

So this:

• Initializes a data property in the state to an empty array.
• Adds each new item to data as it comes in from the database.

With this, you can render the array of data with:

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>
  );
}

This last bit may contain syntax errors, since I've never used FlatList. When in doubt, compare to the documentation of the latter here.