我的reactJS程序必须获取客户端用户发送的请求的百分比,我们必须向管理员用户显示与“ BarangayClearance”相对应的数据百分比,以及状态为“待处理”的数据。运行该程序后,它将引发错误”(错误:Query.orderByChild:您无法合并多个orderBy调用。)如何获得所需的结果?请帮助...
代码:
import React, { Component } from 'react';
import { Bar } from 'react-chartjs-2';
import * as firebase from 'firebase';
import CountUp from "react-countup/build";
var names;
var RequestFor = "none";
var date = "none"
var count = 0;
var countClear;
var PClear = 0;
var percentageClear = 0;
var PCert = 0;
var percentage = 0;
var ClearanceTotal = 0;
var CertificateTotal = 0;
var overAll = 0; //Variable initializations...
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
var database = firebase.database();
var ref = database.ref('BrgyRequests');
ref.on('value', errData);
var BClear = ref.orderByChild('type').equalTo("BarangayClearance").orderByChild('status').equalTo("Pending");
BClear.on('value', errData);
var BCert = ref.orderByChild('type').equalTo("BarangayCertificate");
ref.on("value", function(snapshot) {
count = snapshot.numChildren();
PClear = count/count;
percentage = PClear*100;
console.log("There are "+snapshot.numChildren()+" entries" );
console.log(count)
})
BClear.on('value', function (snapshot) {
var status = snapshot.val()
if (status.status == 'Pending'){
}
ClearanceTotal = snapshot.numChildren();
PClear = ClearanceTotal/count*100;
console.log("Clearance has " + ClearanceTotal + " which is " + PClear +"%");
})
BCert.on('value', function (snapshot) {
CertificateTotal = snapshot.numChildren();
PCert = CertificateTotal/count*100;
console.log("Certificate has " + CertificateTotal + "which is " + PCert + "%");
})
function errData (err) {
// console.log('Error oy!');
console.log(err);
}
class Chart extends Component {
componentWillMount(){
this.setState({
chartData: { labels: ["Brgy. Certificate", "Brgy. Clearance"],
datasets: [
{
label: 'Barangay Re',
data: [
PCert,
PClear
],
backgroundColor: [
'rgba(236,134,169, 0.6)',
'rgba(2,145,216, 0.6)'
]
}]},
})
}
render() {
return (
<div>
<div className="chart">
<Bar
data={this.state.chartData}
options={{maintainAspectRatio: false}}
/>
</div>
<div style={{backgroundColor: '#0291D8', padding: '10px', paddingLeft: '18px', borderRadius: '20px', marginTop:'-140px', height: '110px', width: '150px', marginLeft: '680px'}}>
<div>
<CountUp
style={{ fontFamily: 'Nunito', fontWeight: 'bold', fontSize: '35px', color: '#ffffff', marginLeft: '50px'}}
start={0}
end={ClearanceTotal}
// end={50}
duration={6} />
</div>
<label style={{marginLeft: '15px', color: '#ffffff'}}>Brgy. Clearance</label>
</div>
<div style={{backgroundColor: '#F791B5', padding: '10px', paddingLeft: '18px', borderRadius: '20px', marginTop:'-110px', height: '110px', width: '160px', marginLeft: '850px'}}>
<div>
<CountUp
style={{ fontFamily: 'Nunito', fontWeight: 'bold', fontSize: '35px', color: '#ffffff', marginLeft: '50px'}}
start={0}
end={ClearanceTotal}
// end={50}
duration={6} />
</div>
<label style={{marginLeft: '15px', color: '#ffffff'}}>Brgy. Certificate</label>
</div>
</div>
);
}
}
export default Chart;