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

【问题标题】：React Native Firebase - Push data to Array allowing to display in a FlatListReact Native Firebase - 将数据推送到允许在 FlatList 中显示的数组
【发布时间】：2020-01-08 11:52:56
【问题描述】：

我是 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 []

【问题讨论】：

标签： android firebase react-native firebase-realtime-database

【解决方案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 })

【讨论】：

感谢您的回复。当我尝试上述方法时，我现在在控制台中打印了 Array [] 而不是未定义。我在描述中更新了上面的代码。
推送数据时忘记改变量名，应该是mechanicsTemp
啊，是的，我的错误 - 对不起！奇怪的是，即使在更改之后，我也得到了相同的结果：Array []。我看不到我可能忘记的任何其他内容。我再次更新了上面的代码。
我相信调试它可以帮助你更多。有数据时有一些日志，也可以尝试记录mechanicsTemp 。
别担心 - 我会试一试，希望能把它整理好。感谢您的帮助。

【解决方案2】：

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

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

【讨论】：