Вспомогательный метод занимает много времени для извлечения данных из Firebase, вызывая ошибку рендеринга

Question

Ошибка загрузки состояния, поскольку отображаемые данные еще не загружены.

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

Как я могу это исправить?(заранее спасибо)

import config from "./Config"
import firebase from "firebase";

export function readUserData(path) {
    firebase.database().ref(path).on('value', function (snapshot) {
        console.log(snapshot.val())
        return snapshot.val()
    });
}

import { readUserData } from "../../../server/Actions"
class Resultats extends Component {
    constructor() {
        super()
        this.state = {
            loading: true,
        }
    }

    componentWillMount() {
        let path = "devInc"
        this.setState({
            results: readUserData(path),
            loading: false,
        })
    }

    render() {
        if (this.state.loading) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator size="large" />
                </View>
            );
        }
        return (
            <View style={styles.container}>
                <Text>data</Text>
                <Text>{this.state.results['-LbstaCmVt1nAWUrTw4T'].date}</Text>
            </View>
        );
    }

}

Answer 1

Попробуйте это:

export const readUserData = async() => {
    const snapshot = await firebase.database().ref(path).on('value');
    return snapshot.val();
};

import { readUserData } from "../../../server/Actions"
class Resultats extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            results: null,
        }
    }

    componentDidMount() {
        this.readData();
    }

    readData = async() => {
        let path = "devInc";
        this.setState({ loading: true });
        const results = await readUserData(path);

        this.setState({ loading: false, results });
    };

    render() {
        const { loading, results } = this.state;


        if (loading) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator size="large" />
                </View>
            );
        }
        if (!results) return null;

        return (
            <View style={styles.container}>
                <Text>data</Text>
                <Text>{results['-LbstaCmVt1nAWUrTw4T'].date}</Text>
            </View>
        );
    }

}

Предложение

Это можно было бы сделать лучше с помощью редукционного действия