Как отобразить пользовательские данные c из firebase в виде FlatList в React Native

Question

Я новичок в реактивной и пожарной базе, и я искал какую-либо информацию по этому вопросу, но мне не повезло выяснить, как это сделать. В основном я хочу отобразить данные из firebase, которые указаны c для пользователя, который в данный момент вошел в систему, я прошел половину пути, но не понимаю, что делать дальше. может кто-нибудь показать мне, каким должен быть остальной код

Вот мой код:

class HomeScreen extends Component {
  constructor() {
    super();
    this.state = { 
      uid: ''
    }
  }

  readUserData() {
    currentUser = firebase.auth().currentUser
    var that = this
    firebase.database().ref(`BorrowedBooks`).child(currentUser.uid).on('value', function (data) {
       console.log(data.val())
    });
  }

  signOut = () => {
    firebase.auth().signOut().then(() => {
      this.props.navigation.navigate('Login')
    })
    .catch(error => this.setState({ errorMessage: error.message }))
  }  

  render() {
    this.state = { 
      displayName: firebase.auth().currentUser.displayName,
      uid: firebase.auth().currentUser.uid
    }    
    return (
      <View style={styles.container}>

        <Text style = {styles.textStyle}>
          Hello, {this.state.displayName}
        </Text>

        <View>
        <FlatList/>
        </View>

        <Button
          color="#3740FE"
          title="Logout"
          onPress={() => this.signOut()}
        />
        <Button
          color="#3740FE"
          title="display books"
          onPress={this.readUserData}
        />

      </View>
    );
  }
}

Вот как выглядит моя база данных firebase: база данных firebase

Это ответ после console.log: вывод console.log

Answer 1

вам нужно сохранить данные в массиве, прежде чем вы сможете отобразить их в FlatList

readUserData() {
    currentUser = firebase.auth().currentUser
    var that = this
    firebase.database().ref(`BorrowedBooks`).child(currentUser.uid).on('value', function (data) {
       //console.log(data.val())
      let DATA = [];
      if(data.exists()){
        KEY = Object.keys(data.val());

        KEY.forEach( (key_id) => {
          let a = snapshot.val()[key_id];
          a.key = key_id;
          DATA.push(a);

        })
      that.setState({userData: DATA})

    });
  }

, затем вы можете отобразить их в плоском списке

<FlatList 
  data = {this.state.userData}
  renderItem ={({item}) =>
  //render Items here
  }
 />