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获取数据并设置状态。这是状态作为名为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上的状态（每次用户更改输入值时重新加载所有数据）并再次作为道具传递。

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

您对此问题的更好和更好的表现有何建议？

Answer 1

我不确定我得到的是你说的正确，但是如何使用＆＃39;＆＃39;而不是一次＆＃39;？这样，只要数据库中的节点发生，状态就会发生变化。

Answer 2

如何创建提交按钮，以便在用户保存投注时只更新您的应用？这将大大降低网络请求。不知道你的视图是什么样子很难说这是否合适但我认为一般目标是每次编辑只触发一个网络请求，因为将网络请求绑定到onChange处理程序似乎过多。

我确信您可以对其进行编码，只需将文本字段包装在表单中，添加一个按钮并使用表单的onSubmit事件发送网络请求。

使用React从firebase获取数据和更新的更好方法

2 个答案: