使用React从Firebase加载数据

时间:2018-07-26 03:50:26

标签: reactjs firebase firebase-realtime-database

我有一个a list of patients的火力地堡位置

我试图引用此位置并将其保存在我的react组件的状态中,以便以后传递给下拉列表。我对REACT很陌生,所以我不确定这是否是最好的方法。

import * as firebase from "firebase";

class App extends Component {
  constructor() {
    super();
    this.state = {
      patient: []
    };
  }

  componentDidMount() {
    let patientList = "";
    var rootRef = firebase
      .database()
      .ref()
      .child("patient");
    rootRef.on("child_added", snap => {
      this.setState({
        patient: snap.val().label
      });
    });
  }

  render() {
    return (
      <React.Fragment>
        <li>{this.state.patient}</li>
      </React.Fragment>
    );
  }
}

但是,此代码仅返回firebase位置中的最后一个标签。请帮忙。

2 个答案:

答案 0 :(得分:0)

尝试这个

rootRef.on("child_added", snap => {

    // Store all the labels in array
    var patients = [];
    snapshot.forEach(function(snap){
        var row = snap.val();
        patients.push(row.label);
    });

    // Store label array into state
    this.setState({
        patient: patients
    });
});

答案 1 :(得分:0)

我认为这将帮助您的病例实施实时患者名单。

rootRef.on("child_added", snap => {

    var patients = this.state.patient || [];
    snapshot.forEach(snap => {
        var row = snap.val();
        patients.push(row.label);
    });

    this.setState({
        patient: patients
    });

我希望它会有所帮助。谢谢!