React Native Firebase - данные Pu sh в массив, позволяющие отображать их в FlatList

Question

Я новичок в React Native и немного борюсь за то, чтобы это заработало. У меня есть база данных в реальном времени в Firebase, которая содержит имена 'mechani c'. Я хотел бы получить эти имена и отобразить их в списке.

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

Проблема сейчас в том, что когда я выполняю код, this.setState({ mechanicsList: mechanicsTemp }); возвращает ошибку.

Ошибка

[Unhandled promise rejection: TypeError: this.setState is not a function. 

(In 'this.setState({]
* src\screens\FindMechanics.js:28:30 in <unknown>
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in <unknown>
- ... 8 more stack frames from framework internals

Полный код

import React, { Component } from 'react';
import { View, Text, SafeAreaView, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
import { Card } from 'react-native-elements'
import firebase from "firebase/app";

export default class FindMechanics extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mechanicsList: [],
            isDataLoaded: false
        }
    }

    componentDidMount() {
        var query = firebase.database().ref("MechanicList").orderByKey();
        query.once("value")
            .then(function (snapshot) {
                let mechanicsTemp = [];
                snapshot.forEach(function (childSnapshot) {
                    // key will be the auth ID for each user
                    var key = childSnapshot.key;
                    var mechanicName = snapshot.child(key + '/name').val();
                    mechanicsTemp.push({ _name: mechanicName, _key: key });
                });           
                mechanicsList = mechanicsTemp;            
                () => this.setState({ mechanicsList: mechanicsTemp }); // This does not execute it seems - main problem I believe
                //this.setState({ mechanicsList: mechanicsTemp }); - This return a warning 'this.setState is not a function'
                console.log(mechanicsList); //Prints data as expected
                mechanicsTemp.forEach((mechanic) => {
                   console.log( mechanic._name); //Prints data as expected
                });
            });
    }

    render() {
        //The Card element is empty - nothing shows. 
        console.log(this.state.mechanicsList) //This return Array [] which indicates it is empty
        return (
            <SafeAreaView style={styles.container}>
                <ScrollView horizontal={true}>
                    <TouchableOpacity>
                        <Card style={styles.card}>
                            {
                                this.state.mechanicsList.map((u, i) => {
                                    return (
                                        <View key={i}>
                                            <Text>{u._key}</Text>
                                            <Text>{u._name}</Text>
                                        </View>
                                    );
                                })
                            }
                        </Card>
                    </TouchableOpacity>
                </ScrollView>
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FFF'
    },
    paragraph: {
        margin: 24,
        fontSize: 18,
        textAlign: 'center',
    },
    card: {
        flex: 1,
        width: '80%',
    },
});

Консоль

Finished building JavaScript bundle in 384ms.
Running application on Android SDK built for x86.
Array []

Answer 1

Во-первых, у вас есть mechanics объект в состоянии, поэтому вам нужно получить к нему доступ как

console.log(this.state.mechanics)

Во-вторых, вы не обновляете переменную состояния, когда у вас есть данные, это должно быть как следующий

let mechanicsTemp = [];
snapshot.forEach(function (childSnapshot) {
    // key will be the auth ID for each user
    var key = childSnapshot.key;
    var mechanicName = snapshot.child(key + '/name').val();
    mechanicsTemp.push({_name: mechanicName, _key: key});
});

this.setState({ mechanics:mechanicsTemp })