如何将 Firebase 数据实时更新到 React 应用程序

IT技术 reactjs firebase firebase-realtime-database
2021-04-20 07:27:21

我正在开发一个将 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>
    )
  }
1个回答

您通常希望:

  1. on()在你的componentDidMount()方法中注册一个监听器
  2. setState使用数据库中的相关数据在最初加载和更改时调用
  3. 让 react 像往常一样处理 state 的渲染。

所以像:

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>
  )
}
非常感谢您的评论。我已经搬到了firebase(()componentDidMount()但它不能实时工作。
2021-06-01 07:27:21