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

k4emjkb1  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(120)

我正在开发一个实时更新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>
    )
  }
w3nuxt5m

w3nuxt5m1#

您通常需要:
1.在componentDidMount()方法中注册on()侦听器。
1.当数据库初始加载和更改时,使用数据库中的相关数据调用setState
1.让react像往常一样处理状态中的渲染。
比如:

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

相关问题