Лучший способ извлекать данные и обновлять их из Firebase с помощью React

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, который извлекает данные из базы данных и устанавливает состояние.Это состояние передается как реквизит для сущности GroupsBuilder, у которой есть список соответствий.Каждый раз, когда пользователь обновляет свою ставку на матч, он обновляет значения в базе данных.

 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 (он перезагружает все данные каждый раз, когда пользователь изменяет значение на входе) и снова передается как реквизиты.

Таким образом, каждый раз, когда я обновляю что-то в своем текстовом поле, он вызывает функцию и снова выбирает данные из firebase.Конечно, у меня проблемы с производительностью.

Что вы предлагаете для улучшения и повышения производительности для этой проблемы?

Answer 1

Я не уверен, что правильно понял, что вы говорите, но как насчет использования «вкл» вместо «один раз»?Таким образом, состояние должно меняться всякий раз, когда этот узел в базе данных меняется.

Answer 2

А как насчет создания кнопки отправки, чтобы вы обновляли приложение только тогда, когда пользователь сохраняет ставку?Это существенно снизило бы сетевые запросы.Без какой-либо идеи о том, как выглядит ваше представление, трудно сказать, подходит ли это, но я думаю, что общая цель состоит в том, чтобы инициировать только один сетевой запрос на редактирование, поскольку привязка сетевого запроса к обработчику onChange кажется чрезмерной.

Я уверен, что вы можете закодировать его, просто оберните текстовое поле в форму, добавьте кнопку и используйте событие onSubmit вашей формы для отправки сетевого запроса.