javascript - 将 Firestore 数据检索 react 到数组中不起作用

Question

所以，我正在尝试从我的 firestore 检索数据并将其显示到我的网页上，我已经尝试了所有方法并用尽了这个网站上的每个问题都无济于事。

当我使用下面的代码时，网站页面上没有呈现任何内容，但是当我使用带有虚拟数据的注释代码而不是 firestore 查询检索数据时，数据会按预期呈现。

我对虚拟数据和 firestore 数据都使用了 console.log()，它们都记录了相同的数据数组。

我很困惑为什么即使数组保存正确，Firestore 数据也没有显示匹配项。

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>
    );
  }
}

Answer 1

firebase 请求是异步的，因此在构造函数运行之前不会完成。

您可以将该逻辑放在 componentDidMount 中，并在完成后使用 setState 更新 Matches:

示例

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

  componentDidMount() {
    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>
    );
  }
}