如何解决如何使用 ReactJS 和 AmChart 将数据传递到状态
我创建了一个使用 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=> {
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。