Question

我正在学习如何在React Native中使用Firebase。我有一个包含其详细信息的用户列表，并尝试在列表中的屏幕上打印其信息。我有一个firebase数据库，如下：

{
    "user":{
        "user1":{
            "name":"Rahul"
        }
    }
}

（为了首先仅对1个用户进行尝试而进行了更改），我将代码编写为：

constructor(props){
    super(props);
    this.state ={ isLoading: true}
}

componentDidMount(){
    var events = firebase.database().ref('user');
    events.once('value').then(snapshot => {
        this.setState({ isLoading: false, dataSource: snapshot.val().user1 })
    })
    return events;
}

render(){
    if(this.state.isLoading){
        return(
            <View style={{flex: 1, padding: 20}}>
                <ActivityIndicator/>
            </View>
        )
    }
    return(
        <View style={{flex: 1, paddingTop:20}}>
            <FlatList
                data={this.state.dataSource}
                renderItem={({item}) => <Text>{item.name}</Text>}
                keyExtractor={({id}, index) => id}
            />
        </View>
    );
}

但是当我运行该应用程序时，出现以下错误："Tried to get frame for out of range index Nan"。我知道当传递的数组为空时会出现此错误，但事实并非如此。为什么会出现此错误？请帮我解决这个问题。谢谢...

编辑

我使用了console.log(this.state.dataSource)，它给了我一个值{ name : 'Rahul' }，它验证了我的数组不应该为空...

在React Native中显示Firebase数据库中的列表

0 个答案: