如何在 React Native 中将来自 firebase 的用户特定数据显示为 FlatList答案

【问题标题】：How to display user specific data from firebase as a FlatList in React Native如何在 React Native 中将来自 firebase 的用户特定数据显示为 FlatList
【发布时间】：2020-04-18 12:01:30
【问题描述】：

我是 reactnative 和 firebase 的新手，我查找了这方面的任何信息，但没有弄清楚如何做到这一点。基本上我想显示来自firebase的数据，这些数据特定于当前登录的用户，我已经完成了一半，但不知道下一步该做什么。谁能告诉我剩下的代码需要什么

这是我的代码：

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 database

这是console.log之后的回复：console.log output

【问题讨论】：

你能获取数据吗？如果你这样做了，你应该将它存储在 state 中，然后在你的 flatlist 中使用这个 state
console.log 时可以获取数据，但不是数组形式
那么你应该把它转换成你想要的形状，然后再把它存入状态
这就是问题所在，我不太明白该怎么做.. 你能告诉我怎么做吗？
你能发送你得到的响应吗？

标签： reactjs firebase react-native firebase-realtime-database

【解决方案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
  }
 />

【讨论】：