React Native Firebase - 将数据推送到数组，允许在 FlatList 中显示

Question

我是 React Native 的新手，为了让它工作有点挣扎。 我在 Firebase 中有包含“机械师”名称的实时数据库。 我想检索这些名称并将它们显示在列表中。

我想在列表中显示此数据，然后在用户单击任一名称时执行某些功能。 我想将数据库数据添加到数组中，然后循环遍历数组将其添加到我的 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 })

Answer 2

我不知道您是否仍然需要帮助，但我只是使用了您的代码，并且通过绑定解决了 this.setState 问题。 您可以使用箭头函数或绑定您的函数：

.then(function (snapshot) {
// ..
}.bind(this));