реагировать firebase не может печатать дочерние значения?

Question

Я хочу напечатать дочерние значения firebase в некотором систематическом порядке. Если у меня более одного дочернего узла, то должен быть напечатан весь дочерний узел с его ключом и значением.

Моя база данных Firebase:

Теперь мой код:

import React,{Component} from "react";
import LogInNavbar from './LogIn_Navbar';
import Footer from './Footer';
import HomePageContent from './HomePage_Content';
import {connect} from "react-redux";
import firebase from 'firebase';
import {withRouter} from "react-router-dom";
import {bindActionCreators} from "redux";
import {action_getdata} from '../actions';
import { db } from '../firebase/firebase';
class LoginHome extends Component {
  constructor(props){
    super(props);

    this.state = {
      Hemoglobin:[],
      BloodP:[],
      BloodG:[],
      Diabetic:[],
      Name:''
    };
  }
  componentDidMount(){
    console.log(this.props.user);
    if(this.props.aadharNumber === ''){
      db
      .ref(this.props.quali+'/'+this.props.uName)
      .on('value', snapshot=>{
        this.props.action_getdata({
          aadharNumber: snapshot.val().aadharNumber,
          biometricImage: snapshot.val().biometricImage,
          email: snapshot.val().email,
          firstName: snapshot.val().firstName,
          lastName: snapshot.val().lastName,
          mobileNumber: snapshot.val().mobileNumber,
          password: snapshot.val().password,
          qualification: snapshot.val().qualification,
          uName: snapshot.val().uName
        });
      });
    }
    const rootRef = firebase.database().ref('Reports/');
    const post = rootRef.child('yashchks87').orderByKey();

         post.once('value', snap => {
           snap.forEach(child => {
               this.setState({
                   Name: this.state.Name.concat([child.key]),
                   BloodP: this.state.BloodP.concat([child.val().BloodP]),
                   BloodG: this.state.BloodG.concat([child.val().BloodG]),
                   Hemoglobin: this.state.Hemoglobin.concat([child.val().Hemoglobin]),
                   Diabetic: this.state.Diabetic.concat([child.val().Diabetic])
               });

               const postList = this.state.Name.map((dataList, index) =>
                    <p>
                        {dataList}
                        <br />
                        {this.state.BloodP[index]}
                        <br />
                        {this.state.BloodG[index]}
                        <hr />
                    </p>

                );

                this.setState({
                    post: postList
                });
           });
       });


  }
  render(){
    return(
      <div>
        <LogInNavbar />
        <div className='p-4'>
          <div className='pt-4'/>
          <h1 className='pt-4'>Your history something like this:</h1>
          <ul>{this.state.post}</ul>
        </div>
        <Footer />
      </div>
    );
  }
}
function mapStateToProps(state)
{
  return{
    user:state.authentication.user,
    aadharNumber: state.getdata.aadharNumber,
    biometricImage: state.getdata.biometricImage,
    email: state.getdata.email,
    firstName: state.getdata.firstName,
    lastName: state.getdata.lastName,
    mobileNumber: state.getdata.mobileNumber,
    password: state.getdata.password,
    qualification: state.getdata.qualification,
    uName: state.getdata.uName,
    quali: state.getdata.quali
  }
}
function mapDispatchToProps(dispatch){
  return{
    action_getdata:bindActionCreators(action_getdata,dispatch)
  }
}
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(LoginHome));

Как вы можете видеть в приведенном выше коде, я хочу напечатать все значения в отформатированном виде. Вы также можете увидеть более подробную информацию по этому вопросу, я пробую описанный там способ, но не могу ничего получить и падает с ошибкой.

Как получить и отобразить весь дочерний список из Firebase React .

И моя ошибка:

Моя ошибка изображения. Заранее спасибо.

Answer 1

Одна проблема, которую я вижу, заключается в том, что кажется, что вы пытаетесь сослаться на «Отчеты», но вы не задали для него начальное состояние.Это вернет undefined, если вы попытаетесь сослаться на него.Вы также объявляете значения объекта как массивы.Попробуйте это:

class LoginHome extends Component {
  constructor(props){
    super(props);
    this.state = {
      Reports:[],
      Name:''
    }
  }

Кроме того, «Name, BloodP и BloodG» не являются потомками «yashchks87»

Answer 2

Проблема не в вашей функции render, а в инициализации вашего состояния, где у вас был Name: '' // string not array, а javascript был очень забавным языком, должен был предупредить вас, когда вы пытались

this.setState({
  Name: this.state.Name.concat([child.key]),
 .....

, чтоИмя - это строка, а не массив, но вместо этого JS-тип преобразует ее в строку

'abcd'.concat(['efg']) // 'abcdefg' :-)

, чтобы ваше первоначальное имя было массивом, чтобы избежать этого