javascript - React Firestore data retrieval into array not working - Stack Overflow

admin管理员组

文章数量:1414873

So, I am trying to retrieve data from my firestore and display it onto my webpage, I have tried everything and exhausted every question on this site to no avail.

When I use the code below, nothing renders on the website page, however when I use the mented code with dummy data instead of the firestore query retrieval data, the data renders as it should.

I have used console.log() on both the dummy data and the firestore data and they both log the same data array.

I am confused as to why the firestore data is not displaying the matches even though the array is saved correctly.

class MatchHistoryForm extends Component {
  constructor(props) {
    super(props);

    var Matches = [];
    firebase
      .firestore()
      .collection("Matches")
      .orderBy("date")
      .limit(10)
      .get()
      .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          Matches.push({
            team1: doc.data().team1,
            team2: doc.data().team2,
            winner: doc.data().winner,
            date: doc.data().date
          });
        });
      })
      .catch(function(error) {
        console.log("Error getting documents: ", error);
      });

    // var Matches = [{
    //  team1: "asdf",
    //  team2: "jkl",
    //  winner: "team1",
    //  date: "1/2/2018",
    // }, {
    //  team1: "qwer",
    //  team2: "yuio",
    //  winner: "team2",
    //  date: "1/8/2018",
    // }];

    console.log(Matches);
    this.state = {
      Matches: Matches
    };
  }

  render() {
    return (
      <div id="against">
        {this.state.Matches.map(v => {
          return (
            <p>
              Team1: {v.team1}, Team2: {v.team2}, Winner: {v.winner}, Date:{v.date}
            </p>
          );
        })}
      </div>
    );
  }
}

So, I am trying to retrieve data from my firestore and display it onto my webpage, I have tried everything and exhausted every question on this site to no avail.

When I use the code below, nothing renders on the website page, however when I use the mented code with dummy data instead of the firestore query retrieval data, the data renders as it should.

I have used console.log() on both the dummy data and the firestore data and they both log the same data array.

I am confused as to why the firestore data is not displaying the matches even though the array is saved correctly.

class MatchHistoryForm extends Component {
  constructor(props) {
    super(props);

    var Matches = [];
    firebase
      .firestore()
      .collection("Matches")
      .orderBy("date")
      .limit(10)
      .get()
      .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          Matches.push({
            team1: doc.data().team1,
            team2: doc.data().team2,
            winner: doc.data().winner,
            date: doc.data().date
          });
        });
      })
      .catch(function(error) {
        console.log("Error getting documents: ", error);
      });

    // var Matches = [{
    //  team1: "asdf",
    //  team2: "jkl",
    //  winner: "team1",
    //  date: "1/2/2018",
    // }, {
    //  team1: "qwer",
    //  team2: "yuio",
    //  winner: "team2",
    //  date: "1/8/2018",
    // }];

    console.log(Matches);
    this.state = {
      Matches: Matches
    };
  }

  render() {
    return (
      <div id="against">
        {this.state.Matches.map(v => {
          return (
            <p>
              Team1: {v.team1}, Team2: {v.team2}, Winner: {v.winner}, Date:{v.date}
            </p>
          );
        })}
      </div>
    );
  }
}

• javascript
• html
• reactjs
• firebase
• google-cloud-firestore

Share Improve this question Follow edited Jul 11, 2018 at 1:20 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Jul 11, 2018 at 1:08 Evan MurrayEvan Murray 4311 silver badge55 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The firebase request is asynchronous, so it will not be pleted before the constructor is run.

You could put that logic in ponentDidMount instead and use setState to update Matches when it is done:

Example

class MatchHistoryForm extends Component {
  state = { Matches: [] };

  ponentDidMount() {
    firebase
      .firestore()
      .collection("Matches")
      .orderBy("date")
      .limit(10)
      .get()
      .then(querySnapshot => {
        const Matches = [];

        querySnapshot.forEach(function(doc) {
          Matches.push({
            team1: doc.data().team1,
            team2: doc.data().team2,
            winner: doc.data().winner,
            date: doc.data().date
          });
        });

        this.setState({ Matches });
      })
      .catch(function(error) {
        console.log("Error getting documents: ", error);
      });
  }

  render() {
    return (
      <div id="against">
        {this.state.Matches.map(v => {
          return (
            <p>
              Team1: {v.team1},
              Team2: {v.team2},
              Winner: {v.winner},
              Date: {v.date}
            </p>
          );
        })}
      </div>
    );
  }
}

本文标签： javascriptReact Firestore data retrieval into array not workingStack Overflow