如何将 Firebase 数据实时更新到 React 应用程序 [英] How to update Firebase data to the React application in realtime

问题描述

我正在开发一个将 Firebase 数据实时更新为 React 的应用程序.我想要做的是一个用户更新应用程序中的状态，同时应该为另一个用户更新它.

我已经完成了它，但它不断地呈现 renderStatus() 并且它太慢了.我想在 RDB 数据更新后更新它.

class Status extends Component {构造函数(道具){超级(道具)；this.state = {to_status: 假,from_status: 假};}//改变 RDB 中的状态handleSatus = () =>{const { post } = this.props;火力基地.数据库().ref("/busy/" + post.uid).放({状态:真实，last_changed: firebase.database.ServerValue.TIMESTAMP});this.setState({ to_status: true });};渲染状态(){const { post } = this.props;const { to_status, from_status } = this.state;//获取RDB中的数据让 self = this;火力基地.数据库().ref("/busy/" + post.uid).一次(价值").then(功能(快照){self.setState({ from_status: snapshot.val().status });});如果(this.state.from_status){返回 (<p>更新</p>);} 别的 {返回 (<p>尚未更新</p>);}}使成为() {返回 (<div>{this.renderStatus()}<button onClick={this.handleStatus()}>点击！</button>

)}

解决方案

您通常需要:

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

比如:

componentDidMount() {火力基地.数据库().ref("/忙/" + posy.uid).on("值").then((快照) => {this.setState({ from_status: snapshot.val().status });});}使成为() {返回 (<div><p>{this.state.from_status?"Updated":"尚未更新"}</p><button onClick={this.handleStatus()}>点击！</button>

)}

I'm developing an application that updates Firebase data in realtime to React. What I want to do is that a user updates the state in the app, at the same time it should be updated for another user.

I have built it done but it continually renders renderStatus() and it's too slow. I want to make it updated once RDB data updated.

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>
    )
  }

解决方案

You'll typically want to:

1. Register an on() listener in your componentDidMount() method.
2. Call setState with the relevant data from the database, when that initially loads and when it changes.
3. Let react handle the rendering from the state as usual.

So something like:

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 数据实时更新到 React 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！