Как обновить данные Firebase в приложении React в режиме реального времени

Question

Я разрабатываю приложение, которое обновляет данные Firebase в реальном времени до React. Я хочу, чтобы пользователь обновлял состояние в приложении, в то же время оно должно быть обновлено для другого пользователя.

Я сделал это, но он постоянно отображает renderStatus(), и это слишком медленно. , Я хочу обновить его после обновления данных RDB.

class Status extends Component {
  constructor(props) {
    super(props);
    this.state = {
      to_status: false,
      from_status: false
    };
  }

  // change the state in RDB
  handleSatus = () => {
    const { post } = this.props;
    firebase
      .database()
      .ref("/busy/" + post.uid)
      .set({
        status: true,
        last_changed: firebase.database.ServerValue.TIMESTAMP
      });
    this.setState({ to_status: true });
  };

  renderStatus() {
    const { post } = this.props;
    const { to_status, from_status } = this.state;

    // fetch the data in RDB
    let self = this;
    firebase
      .database()
      .ref("/busy/" + post.uid)
      .once("value")
      .then(function(snapshot) {
        self.setState({ from_status: snapshot.val().status });
      });

      if (this.state.from_status) {
        return (
          <p>Updated</p>
        );
      } else {
        return (
          <p>Not updated yet</p>
        );
      }
  }

  render() {
    return (
      <div>
        {this.renderStatus()}
        <button onClick={this.handleStatus()}>Click!</button>
      </div>
    )
  }

Answer 1

Обычно вы хотите:

1. Зарегистрировать on() слушателя в вашем методе componentDidMount().
2. Вызвать setState с соответствующими данными из базы данных, когда он изначально загружается, а когда он меняется.
3. Давайте реагируем на обработку рендеринга из состояния как обычно.

Так что-то вроде:

componentDidMount() {
  firebase
    .database()
    .ref("/busy/" + posy.uid)
    .on("value")
    .then((snapshot) => {
      this.setState({ from_status: snapshot.val().status });
    });
}
render() {
  return (
    <div>
      <p>{this.state.from_status?"Updated":"Not updated yet"}</p>
      <button onClick={this.handleStatus()}>Click!</button>
    </div>
  )
}