React-Native Firebase Показать массив объектов с помощью FlatList

Question

Я пытаюсь отобразить некоторые данные Firebase, но ничего не отображается.

export default class ListGroupScreen extends Component {
    constructor(){
        super();

        this.state = {
            dataArray: [],
        }

    }

    componentDidMount() {
        let that = this;

        firebase.database().ref('/groups').on('child_added', function (data){
            that.setState({
                dataArray: data.val()
            })

        })
    }

    render() {

        console.log(this.state.dataArray);
        console.log(this.state.dataArray[0]);

        return (
            <List>
                <FlatList
                    data={this.state.dataArray}
                    renderItem={({ item }) => (
                        <ListItem
                            title={<Text>{item.groupTitle}</Text>}
                            time={<Text>{item.groupTime}</Text>}
                        />
                    )}
                />
            </List>
        );
    }
}

console.log (this.state.dataArray); дает мне все элементы в базе данных, но console.log (this.state.dataArray [0]); дает мне неопределенное. как показано здесь:

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

Answer 1

Причина в том, что .on('child_added') возвращает один объект для каждого элемента в узле groups.

В вашем случае вам нужно использовать .once('value'), который вернет вам коллекцию ( объект ) с элементами, которые вы должны преобразовать в массив:

firebase.database().ref('/groups').once('value', function(snapshot) {
    var returnArray = [];

    snapshot.forEach(function(snap) {
        var item = snap.val();
        item.key = snap.key;

        returnArray.push(item);
    });

    // this.setState({ dataArray: returnArray })
    return returnArray;  
});

Answer 2

FlatList реагирует на собственный компонент, ожидающий, что данные будут массивом.Вы передаете его как объект, даже если вы объявили в подрядчике как массив;но в componentDidMount вы переопределяете объект.Вы можете изменить его на массив объектов.

console.log(this.state.dataArray[0]) определенно дают undefined, потому что это не массив

export default class ListGroupScreen extends Component {
    constructor(){
        super();

        this.state = {
            data: null,
        }

    }

    componentDidMount() {
       const that = this;
       firebase.database().ref('/groups').on('child_added', function (data){
            that.setState({
                data: data.val()
            })

        })
    }

    render() {

        const dataArray = Object.values(this.state.data)

        return (
            <List>
                <FlatList
                    data={dataArray}
                    renderItem={({ item }) => (
                        <ListItem
                            title={<Text>{item.groupTitle}</Text>}
                            time={<Text>{item.groupTime}</Text>}
                        />
                    )}
                />
            </List>
        );
    }
}