如何使用 ReactJS 和 AmChart 将数据传递到状态答案

【问题标题】：How to pass data into state using ReactJS and AmChart如何使用 ReactJS 和 AmChart 将数据传递到状态
【发布时间】：2021-01-08 14:28:06
【问题描述】：

我创建了一个使用 amChart 显示报告的 Web 应用程序，并遵循 ReactJS amChart 实现，现在我试图将 firebase 查询结果传递到 ReactJS 状态，但无法说明为什么我无法显示状态数据值。

我的想法是将所有费用数据和利润数据相加，然后设置每个数据，然后将其传递给 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..
       
      }

【问题讨论】：

标签： reactjs amcharts

【解决方案1】：

由于setState 是异步的，因此您永远不会以这种方式获得结果。

您需要将您的 componentDidMount 方法描述为 async componentDidMount 然后 await 才能完成承诺

await queryRef.then(ref=> {

和

await queryProf.then(ref=> {

【讨论】：