Question

这是数据：

我想知道如何阅读＆＃34;食物＆＃34;孩子的数据，而我正在读整棵树。所以对于每个请求ID，我需要打印地址，评论食物（及其孩子）等... 这是我用来打印请求下的项目但我无法联系到食品项目下的每个孩子。有什么建议吗？

  componentDidMount(){
const ordersRef = fire.database().ref().child('Requests').orderByKey();


ordersRef.once('value', snapshot => {
  snapshot.forEach(child =>{
    this.setState({
      orderId: this.state.orderId.concat([child.key]),
      address: this.state.address.concat([child.val().address]),
      comment: this.state.comment.concat([child.val().comment]),
      name: this.state.name.concat([child.val().name]),
      phone: this.state.name.concat([child.val().phone]),
      status: this.state.name.concat([child.val().status]),
      total: this.state.name.concat([child.val().total]),

    });
  })

感谢

Answer 1

是的，你是对的，我做了如下的完整示例代码，它没有任何花哨的格式化工作：

firebase的fire.js配置文件：

  import firebase from 'firebase'

  // Initialize Firebase
  var config = {
    apiKey: "your app key",
    authDomain: "yourprojectid.firebaseapp.com",
    databaseURL: "https://yourprojectid.firebaseio.com",
    projectId: "yourprojectid",
    storageBucket: "yourprojectid.appspot.com",
    messagingSenderId: "this id is given by firebase"
  };
  var fire = firebase.initializeApp(config);
  export default fire;


import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import fire from './fire';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      orderId:[],
      address:[],
      comment:[],
      food:[],
      name:[],
      phone:[],
      status:[],
      total:[],
      orders:''    
    };
  }
    componentDidMount(){
      const ordersRef = fire.database().ref().child('Requests').orderByKey();


      ordersRef.once('value', snapshot => {
        snapshot.forEach(child =>{
          this.setState({
            orderId: this.state.orderId.concat([child.key]),
            address: this.state.address.concat([child.val().address]),
            comment: this.state.comment.concat([child.val().comment]),
            name: this.state.name.concat([child.val().name]),
            phone: this.state.phone.concat([child.val().phone]),
            status: this.state.status.concat([child.val().status]),
            total: this.state.total.concat([child.val().total]),
            food: this.state.food.concat([child.val().food]),

          });
        })

      const ordersList = this.state.orderId.map((dataList, index)=>
      <p>
          {dataList}
          <br />
          {this.state.address[index]}, {this.state.comment[index]}, {this.state.name[index]}
          <br />
          <br />
          <b>Foods ordered: </b>
          {this.state.food[index].map((f,index) => (
            <p key={index}>{index+1}-Food name:{f.productName} , 
          Food ID: {f.productId} , Food price:{f.price}</p>

          )
            )}
          <br />
              </p>
    ); 
            this.setState({
              ordersRef: ordersList
          });
    })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
        <p className="App-intro">
        <ul>
        <ul>{this.state.ordersRef}</ul>

        </ul>
        </p>
      </div>
    );
  }
}

导出默认App;

请确保每个

都有一个ID作为索引！

使用firebase获取反应中的项目列表

1 个答案: