Reactjs 从Firebase异步获取数据

我试图从firebase集合中获取一些数据，但似乎无法使其正常工作

我的代码如下：-

组成部分：-

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchPlayers } from '../../redux/players/players.actions';

class Players extends Component {

    componentDidMount() {
        this.props.fetchPlayers(); 
    }

    render() {
        const { players } = this.props;

        // const playerItems = players.map(player => (
        //     <div key={player.id}>
        //         <h3>{player.name}</h3>
        //     </div>
        // ));

        return (
            <div>
                <h1>PLAYERS</h1>
                {/* {playerItems} */}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    players: state.players.items,
    newPlayer: state.players.item
});

export default connect(mapStateToProps, {fetchPlayers})(Players);

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchPlayers } from '../../redux/players/players.actions';

class Players extends Component {

    componentDidMount() {
        this.props.fetchPlayers(); 
    }

    render() {

        const {players} = this.props;
        let playerItems = ''

        if (players) {
            playerItems = players.map(player => (
                <div key={player.id}>
                    <h3>{player.name}</h3>
                </div>
            ));
        }


        return (
            <div>
                <h1>PLAYERS</h1>
                    {playerItems}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    players: state.players.items,
    newPlayer: state.players.item
});

我的数据库功能如下：-

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

const db = firebase.firestore();

export const getPlayers = () => {
    const players = fetchData();
    return players;
}

export const addPlayer = (playerToAdd) => {
    db.collection("players").add({ ...playerToAdd });
}

const fetchData = async () => {
    let playerArr = [];
    await db.collection("players")
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            playerArr = playerArr.concat(doc.data());
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

    return playerArr;

}

我的问题是，在我的组件中，播放器仍然是一个承诺，并且fetchData（）db调用在之后返回

如何等待数组首先被填充（在fetchData（）中），然后通过操作将其传递给我的组件

---

谢谢你的帮助，非常感谢

我已经设法用这种方法修复了它，但不确定这是否是正确的方法，对于Redux来说还是相当新的：-

组成部分：-

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchPlayers } from '../../redux/players/players.actions';

class Players extends Component {

    componentDidMount() {
        this.props.fetchPlayers(); 
    }

    render() {
        const { players } = this.props;

        // const playerItems = players.map(player => (
        //     <div key={player.id}>
        //         <h3>{player.name}</h3>
        //     </div>
        // ));

        return (
            <div>
                <h1>PLAYERS</h1>
                {/* {playerItems} */}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    players: state.players.items,
    newPlayer: state.players.item
});

export default connect(mapStateToProps, {fetchPlayers})(Players);

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchPlayers } from '../../redux/players/players.actions';

class Players extends Component {

    componentDidMount() {
        this.props.fetchPlayers(); 
    }

    render() {

        const {players} = this.props;
        let playerItems = ''

        if (players) {
            playerItems = players.map(player => (
                <div key={player.id}>
                    <h3>{player.name}</h3>
                </div>
            ));
        }


        return (
            <div>
                <h1>PLAYERS</h1>
                    {playerItems}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    players: state.players.items,
    newPlayer: state.players.item
});

火基：-

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

const db = firebase.firestore();

export const getPlayers = async () => {
    const players = await fetchData();
    return players;
}

export const addPlayer = (playerToAdd) => {
    db.collection("players").add({ ...playerToAdd });
}

const fetchData = async () => {
    let playerArr = [];
    await db.collection("players")
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            playerArr = playerArr.concat(doc.data());
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

    return playerArr;

}

这样做是可行的，但是如果你有任何建议，欢迎倾听

---

谢谢

我已经设法用这种方法修复了它，但不确定这是否是正确的方法，对于Redux来说还是相当新的：-

组成部分：-

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchPlayers } from '../../redux/players/players.actions';

class Players extends Component {

    componentDidMount() {
        this.props.fetchPlayers(); 
    }

    render() {
        const { players } = this.props;

        // const playerItems = players.map(player => (
        //     <div key={player.id}>
        //         <h3>{player.name}</h3>
        //     </div>
        // ));

        return (
            <div>
                <h1>PLAYERS</h1>
                {/* {playerItems} */}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    players: state.players.items,
    newPlayer: state.players.item
});

export default connect(mapStateToProps, {fetchPlayers})(Players);

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchPlayers } from '../../redux/players/players.actions';

class Players extends Component {

    componentDidMount() {
        this.props.fetchPlayers(); 
    }

    render() {

        const {players} = this.props;
        let playerItems = ''

        if (players) {
            playerItems = players.map(player => (
                <div key={player.id}>
                    <h3>{player.name}</h3>
                </div>
            ));
        }


        return (
            <div>
                <h1>PLAYERS</h1>
                    {playerItems}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    players: state.players.items,
    newPlayer: state.players.item
});

火基：-

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

const db = firebase.firestore();

export const getPlayers = async () => {
    const players = await fetchData();
    return players;
}

export const addPlayer = (playerToAdd) => {
    db.collection("players").add({ ...playerToAdd });
}

const fetchData = async () => {
    let playerArr = [];
    await db.collection("players")
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            playerArr = playerArr.concat(doc.data());
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

    return playerArr;

}

这样做是可行的，但是如果你有任何建议，欢迎倾听

---

谢谢

这不起作用，我尝试了：-const players=fetchData（）。然后（players=>return players）；但是我在returnplayers上得到了一个错误；正在引发错误“{”expectedI我尝试了以下操作：-const players=fetchData（）。然后（players=>{return players}）；仍然返回承诺此操作不起作用我尝试了以下操作：-const players=fetchData（）。然后（players=>return players）；但是我在returnplayers上遇到错误。然后（players=>return players）；正在引发错误'{'expectedI尝试了这个：-const players=fetchData（）。然后（players=>{return players}）；仍然返回一个承诺