reactjs - 使用 React 从 Firebase 加载数据

Question

我有一个带有患者名单的火力基地位置

我正在尝试引用此位置并将其保存为我的反应组件的状态，以便稍后传递给下拉列表。我对 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 位置中的最后一个标签。请帮忙。

标签： reactjsfirebasefirebase-realtime-database

Answer 1

试试这个

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