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

我创建了一个使用amChart显示报告的web应用程序，并遵循了ReactJS amChart实现，现在我正试图将firebase查询结果传递到ReactJS状态，但无法找出无法显示状态数据值的原因

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

，然后

等待承诺完成

等待queryRef.then（ref=>{

及

等待queryProf。然后（ref=>{
解决了它，谢谢！