javascript - 使用 React 从 Firebase 获取数据和更新的更好方法

Question

我有一个世界杯投注应用程序。它有 64 场比赛，每场比赛都有您的away_score 和 home_score，如下所示:

matches: {
    1: {
      name: 1,
      type: "group",
      home_team: 1,
      away_team: 2,
      home_result: ' ',
      away_result: ' ',
      date: "2018-06-14T18:00:00+03:00",
      stadium: 1,
      channels: [],
      finished: false,
      group: "a"
    },
    2: {...

我有一个名为 MatchesBuilder 的实体，它从 firebase 获取数据并设置状态。这个状态作为 props 传递给一个名为 GroupsBuilder 的实体，该实体有一个匹配列表。每次用户更新比赛的赌注时，都会更新 firebase 上的值。

 fetchMatches = async () => {
    const { firebaseApp, user } = this.props;
    await firebaseApp
      .database()
      .ref(`/pools/${this.props.pool.key}/users/${user.uid}/matches`)
      .once("value")
      .then(snapshot => {
        this.setState({
          matches: this.snapshotToArray(snapshot),
          isLoading: false
        });
      });
    await this.checkBettingStatus();
  };

在我的 Match 实体上，我有:

<TextField id={`${this.props.game.home_team}_home`}
type="number"
disabled={this.props.finishedTimeToBet}
value={this.props.game.home_result}
onChange={(e, game, type) =>
this.props.handleChangedResult(e, this.props.game, "home")
}
/>

它正在工作。但仅仅因为，我有一个方法可以更新 MatchesBuilder 上的状态(每次用户更改输入上的值时它都会重新加载所有数据)并再次作为 props 传递。

因此，每次我在 Textfield 上更新某些内容时，它都会调用一个函数并再次从 Firebase 获取数据。当然我有性能问题。

对于这个问题，您有什么更好的、更好的性能建议？

Answer 1

我不确定我是否正确理解了您的意思，但是使用“on”而不是“once”怎么样？这样，只要数据库中的节点发生变化，状态就会发生变化。