(реагировать-нативно) функция из другого компонента не будет возвращать мое значение

Question

Я строю класс с вызовами Firebase. Когда я впервые построил свой класс, я сделал свой вызов непосредственно в тот же класс (чтобы получить некоторые данные), и он прекрасно работает таким образом.

Затем я решил создать выделенный класс для вызовов базы данных, и я использую точно такой же код, чтобы получить мои данные из моей базы данных Firebase, и после дальнейшего исследования кажется, что у меня возникла проблема со значением, возвращаемым из одного класса в другой (и именно поэтому я редактирую свой пост и меняю заголовок).

Вот мой основной класс:

import React from 'react'
import { StyleSheet, Text, Image, View, TouchableOpacity, Platform } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import firebase from '../config/Firebase'

import GlobalAccess from '../dbaccess/GlobalData.js'
import StuffAccess from '../dbaccess/StuffData.js'
import MoneyAccess from '../dbaccess/MoneyData.js'

class Home extends React.Component {

    constructor(props) {
        super(props)
        this._goToSettings = this._goToSettings.bind(this)
        this.ref = firebase.firestore().collection('globalData')
// as said, I first put this.ref to call directly firebase from my main class and it's working fine

        this.state = { 
            totalMoney: 0,
            totalQuantity: 0,
            isLoading: true
        }
    }

    _updateNavigationParams() {
        const navigation = this.props.navigation

        let settingsIconName
        (Platform.OS === 'android') ? settingsIconName = 'md-settings' : settingsIconName = 'ios-settings'

        navigation.setOptions({
            headerRight: () => <TouchableOpacity style={styles.settings_touchable_headerrightbutton}
                            onPress={() => this._goToSettings()}>
                                <Ionicons name={settingsIconName} style={styles.settings_image} />
            </TouchableOpacity>
        })
    }

    componentDidMount(){
        this._updateNavigationParams()
        //this._getData()
        this.totalStuff = StuffAccess.totalStuff()
        }

Вот (общий) код StuffData. js

// dbaccess/StuffAccess.js

import firebase from '../config/Firebase'

class StuffAccess {

    constructor() {
        this.stuff = firebase.firestore().collection('stuff');
    }

    getStuffData(){
        const stuffList = [];

        let query = this.stuff.get()
        .then(snapshot => {
            if (snapshot.empty) {
            console.log('No stuff data.');
            return stuffList
            }  

            snapshot.forEach(stuff => {

                const { title, quantity, date, people, type } = stuff.data()
                stuffList.push({
                    key: stuff.id,
                    title,
                    quantity,
                    date: (date.toString().length > 0) ? new Date(date.seconds*1000) : new Date(),
                    people,
                    type
                })
            })
        })
        .catch(err => {
            console.log('Error getting stuff data : ', err);
        });

        console.log('stufflist : ' + stuffList)
        return stuffList
    }

    totalStuff() {
        let totalStuff = 0;

        let query = this.stuff.get()
        .then(snapshot => {
            if (snapshot.empty) {
            console.log('No stuff data.');
            return stuffList
            }  

            snapshot.forEach(stuff => {

                totalStuff += stuff.data().quantity

            })
            console.log('totalStuff : ' + totalStuff)
            return totalStuff
        })
        .catch(err => {
            console.log('Error getting stuff data : ', err);
        });
    }

    addStuff(title, quantity, date, people, type) {
        // Ajout du prêt d'objet en BDD
        this.stuff.add({
            title: title,
            quantity: quantity,
            date: date,
            people: people,
            type: type
        }).then((docRef) => {
            console.log("stuff added to db")
        })
        .catch((error) => {
            console.error("Error adding stuff : ", error);
        });
    }

    deleteStuff(key) {
        this.stuff.doc(key).delete()
        .catch((error) => {
            console.error("Error deleting stuff : ", error);
        });
    }
}

const stuffAccess = new StuffAccess();
export default StuffAccess

Моя функция возврата, похоже, ничего не возвращает в мой дом учебный класс. this.state.totalStuff - это undefined после вызова в Home. js в функции ComponentDidMount().

Answer 1

Хорошо, после такого глубокого копания в сети у меня болят глаза, и я понял, в чем заключалась моя проблема.

Итак, как было впервые обнаружено, это было, когда я пытался передавать данные между моими функциями.

Я понял, как работает javascript, и в особенности то, что классы не могут (по крайней мере напрямую, как я пытался это сделать) передавать динамическое c содержимое из одного в другое.

Итак, решение должен использовать метод async().

Я должен написать класс, вызывающий мою базу данных, вот так (взгляните на getStuffData() или totalStuff() функции:

// dbaccess/StuffData.js

import firebase from '../config/Firebase'

export default class StuffData {

    constructor() {
        this.stuff = firebase.firestore().collection('stuff');

    }

    // async function puisque react fonctionne de la sorte. Il ne peut donc transmettre de façon dynamique des données
    // entre les classes (sinon il pourrait attendre indéfiniment). Il faut ensuite récupérer la promise de l'autre côté.
    async getStuffData() {
        const stuffList = []

        let query = await this.stuff.get()
        .then(snapshot => {
            if (snapshot.empty) {
            console.log('No stuff data.');
            return stuffList
            }  

            snapshot.forEach(stuff => {

                const { title, quantity, date, people, type } = stuff.data()
                stuffList.push({
                    key: stuff.id,
                    title,
                    quantity,
                    date: (date.toString().length > 0) ? new Date(date.seconds*1000) : new Date(),
                    people,
                    type
                })
            })
        })
        .catch(err => {
            console.log('Error getting stuff data : ', err);
        });

        return stuffList
    }

    async totalStuff() {
        let totalQuantity = 0

        let query = await this.stuff.get()
        .then(snapshot => {
            if (snapshot.empty) {
            console.log('No stuff data.')
            return [];
            }  

            snapshot.forEach(stuff => {
                totalQuantity += parseInt(stuff.data().quantity)
            })
        })
        .catch(err => {
            console.log('Error getting stuff data : ', err);
        })
        return totalQuantity
    }

    addStuff(title, quantity, date, people, type) {
        // Ajout du prêt d'objet en BDD
        this.stuff.add({
            title: title,
            quantity: quantity,
            date: date,
            people: people,
            type: type
        }).then((docRef) => {
            console.log("stuff added to db")
        })
        .catch((error) => {
            console.error("Error adding stuff : ", error);
        });
    }

    deleteStuff(key) {
        this.stuff.doc(key).delete()
        .catch((error) => {
            console.error("Error deleting stuff : ", error);
        });
    }
}

И позвоните и прочитайте Promise в моем другом классе, например:

_getData() {
        let myStuff = new StuffData();
        myStuff.totalStuff().then(val => { this.setState({
            totalQuantity: val
            })
        })
        .catch(error => {
            console.error(error)
        })

        let myMoney = new MoneyData();
        myMoney.totalMoney().then(val => { this.setState({
            totalMoney: val
            })
        })
    }

Это решило мою проблему.