问题描述
我创建了一个使用 amChart 显示报告的 Web 应用程序，并遵循 ReactJS amChart 实现，现在我试图将 firebase 查询结果传递到 ReactJS 状态，但无法说明为什么我无法显示状态数据值。
我的想法是将所有费用数据和利润数据相加，然后对每个数据进行 setState，然后将其传递给 amChart chart.data 数组
到目前为止我的代码。
componentDidMount () {
am4core.useTheme(am4themes_animated);
let chart = am4core.create("chartdiv",am4charts.XYChart);
let expense = 0;
let profit = 0;
const citiesRef = db.collection('transactions');
// Create a query against the collection
const queryRef = citiesRef.where('category','==','Expense').get();
const queryProf = citiesRef.where('category','Profit').get();
queryRef.then(ref=> {
ref.docs.forEach(doc => {
expense += parseInt(doc.data().amount)
})
return this.setState( { totalExpense: expense } )
})
queryProf.then(ref=> {
ref.docs.forEach(doc => {
profit += parseInt(doc.data().amount)
})
return this.setState( { totalProfit: profit } )
})
chart.data = [
{
"year": "2003","expense": this.state.totalExpense,"profit": this.state.totalProfit,}
];
// Rest of the chart code..
}
解决方法
由于 setState 是异步的，您永远不会以这种方式获得结果。
您需要将 componentDidMount 方法表征为 async componentDidMount 然后 await 才能完成承诺
await queryRef.then(ref=> {
和
await queryProf.then(ref=> {