如何在 iOS 的本机反应中显示从 Firebase 检索到的数据答案

【问题标题】：How to display data retrieved from firebase in react naive for ios如何在 iOS 的本机反应中显示从 Firebase 检索到的数据
【发布时间】：2023-03-05 12:33:01
【问题描述】：

我的团队正在开发一个辅导应用程序，学生可以在该应用程序中从学生端向导师端发送请求。我们可以参考 firebase 获取输出数据并在控制台中查看。但是我们无法在页面上显示。这是这里的导师端代码：

import React from 'react';
import { FlatList, Text, StyleSheet, View } from 'react-native';
import firebaseRef from './Firebase';


export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = ({
            sessions: []
        });
    }
    componentDidMount(){
        const { uid } = firebaseAuth.currentUser
        firebaseRef.database().ref('Sessions/' + uid).on('value', function (snapshot) {
            sessions = snapshot.val()
            this.setState({
                sessions: sessions,
                sessions,
              });
      })
    }

    getSessionsRef = () => {
        return firebaseRef.database().ref('sessions')
      }

    render(){
        const {sessions} = this.state
        return(
        <View style={styles.container}>
            <FlatList>
                <Text>{sessions}</Text>
            </FlatList>
        </View>
         )
        }
    }

const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent:'center',
        padding:-1.5
    }
});

【问题讨论】：

将渲染后的行更改为“ const {sessions} = this.state.sessions”
您的问题在 Flatlist 中。那不是您使用 Flatlist 的方式。 Flatlist 需要某些道具。这是官方文档facebook.github.io/react-native/docs/flatlist

标签： javascript firebase firebase-realtime-database react-native-ios

【解决方案1】：

类似这样的：

<FlatList
  data={sessions}
  keyExtractor={(item, index) => item.id}
  renderItem={({item}) => (
    <Text>{item}</Text>
  )}
/>

【讨论】：