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

将Firestore数据检索到阵列中无法正常工作

1 个答案: