Question

我想以系统的顺序打印firebase子值。如果我有超过1个子节点，那么应该打印带有它的键和值的所有子节点。

我的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));

正如您在上面的代码中看到的，我想以格式化的方式打印所有值。您还可以在此问题上查看更多详细信息，我尝试了那里描述的方式，但无法获得任何内容并且出错。

How to get and display all child list from Firebase React

我的错误是：

My error picture. 提前谢谢。

Answer 1

问题不是来自您的render功能，而是来自您的状态初始化Name: '' // string not array，javascript是一种非常有趣的语言应该在您尝试时警告过您

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

Name是字符串而不是数组，而是JS类型将其转换为字符串

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

将您的初始名称设为数组以避免此

Answer 2

我看到的一个问题是，您似乎正在尝试引用＆＃39;报告＆＃39;但是你没有为它设置初始状态。如果您尝试引用它，将返回undefined。您还将对象的值声明为数组。试试这个：

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

此外，＆＃34;姓名，BloodP和BloodG＆＃34;不是＆＃39; yashchks87＆＃39;

的孩子

反应firebase无法打印子值？

2 个答案: