Javascript 在react应用程序中为顶点图表使用状态数据中的状态值

我减少/映射了我的数据库查询，以返回如下数组

doccarries:[1234567899345234678234]

我在映射的函数末尾将其设置为一个名为

maxcarries

的状态变量

问题是,，我试图使用MaxCarries的值作为另一个状态变量，用于apex图表，但它不起作用，我想知道这是否是因为我的图表

系列

值与

MaxCarries

一起处于状态，而映射和设置MaxCarries的函数是在componentDidMount函数中完成的。图表是在页面加载时呈现的，所以我只是想知道如何在图表的状态数据中使用MaxCarries

import React, { Component } from "react";
import Chart from "react-apexcharts";
import { StyleSheet, css } from 'aphrodite/no-important';

import DB from '../../db';
import * as moment from 'moment';



class TrendsComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentDate: new Date(),
      maxCalories: '',
      caloriesDB: new DB('calorie-records'),
      calorieElements: null,
      series: [
        {
          name: "Trend (tracked)",
          data: [this.maxCalories]
        }
      ]

    };
  }

   componentWillMount(){

        this.fetchData();
        this.getMax();

        console.log('this is the mounted max calories');
        console.log(this.state.maxCalories);
    }

    fetchData = () => {
        this.setState({
            calorieElements: null,
        });
        this.state.caloriesDB.db.allDocs({
            include_docs: true,
        }).then(result => {
            const rows = result.rows;
            console.log('this is a row');
            console.log(result);
            this.setState({
                calorieElements: rows.map(row => row.doc),
            });
            console.log(this.state.calorieElements);
        }).catch((err) =>{
            console.log(err);
        });
      }

      getMax = () => {

        this.state.caloriesDB.db.createIndex({
          index: {
            fields: ['_id','caloriesBurned', 'createdAt']
          }
        }).then(result => {
          console.log(result);
          this.setMax();

       }).catch((err) =>{
          console.log(err);
        });
      }

      setMax = () => {
        this.state.caloriesDB.db.find({
          selector: {
            $and: [
              {_id: {"$gte": null}},
              {caloriesBurned: {$exists: true}},
              {createdAt: {$exists: true}}
            ]
          },
          fields: ['caloriesBurned', 'createdAt'],
          sort: [{'_id':'desc'}],
          limit: 7
        }).then(result => {

          const newDocs = result.docs;
          const docCalories = newDocs.map(x => +x.caloriesBurned);

          console.log('this is map');
          console.log(docCalories);

          this.setState({
            maxCalories: docCalories
          });

          console.log('this is maxCalories FINAL');
          console.log(this.state.maxCalories);

        }).catch((err) =>{
          console.log(err);
        });
      }

  render() {

    return (

          <div className="mixed-chart">

            <Chart

              options={this.state.options}
              series={this.state.series}
              type="area"
              stacked="true"
              width="700"
            />
          </div>
    );
  }
}

export default TrendsComponent;

import React，{Component}来自“React”；
从“react apexcharts”导入图表；
从“aphrodite/no-important”导入{StyleSheet，css}；
从“../../DB”导入数据库；
从“时刻”导入*作为时刻；
类TrendsComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
currentDate:新日期（），
MaxCarries:“”，
卡路里数据库：新数据库（“卡路里记录”），
卡路里元素：空，
系列：[
{
名称：“趋势（跟踪）”，
数据：[this.maxcarries]
}
]
};
}
组件willmount（）{
这是fetchData（）；
这个.getMax（）；
log（“这是装载的最大卡路里”）；
console.log（this.state.maxcarries）；
}
fetchData=（）=>{
这是我的国家({
卡路里元素：空，
});
this.state.caloriesDB.db.allDocs({
包含文档：true，
})。然后（结果=>{
const rows=result.rows；
log（“这是一行”）；
控制台日志（结果）；
这是我的国家({
卡路里元素：rows.map（row=>row.doc），
});
console.log（this.state.carolielements）；
}).catch（（错误）=>{
控制台日志（err）；
});
}
getMax=（）=>{
this.state.caloriesDB.db.createIndex({
索引：{
字段：[''u id'，'caroriesburned'，'createdAt']
}
})。然后（结果=>{
控制台日志（结果）；
这是setMax（）；
}).catch（（错误）=>{
控制台日志（err）；
});
}
setMax=（）=>{
this.state.caloriesDB.db.find({
选择器：{
美元及：[
{{u id:{“$gte”：null}，
{卡路里燃烧：{$exists:true}}，
{createdAt:{$exists:true}
]
},
字段：['carriesburned'，'createdAt']，
排序：[{''u id'：'desc'}]，
限额：7
})。然后（结果=>{
const newDocs=result.docs；
const docCalories=newDocs.map（x=>+x.caroriesburned）；
log（“这是地图”）；
控制台日志（doccarries）；
这是我的国家({
最大卡路里：多卡
});
log（'这是MaxCarries FINAL'）；
console.log（this.state.maxcarries）；
}).catch（（错误）=>{
控制台日志（err）；
});
}
render（）{
返回(
);
}
}
导出默认趋势组件；

---

rea

所以问题在于，您没有更新序列，在渲染方法中，您使用的是

this.state.series

，但当您更新

maxcarries

时，您做得不对

  setMax = () => {
    this.state.caloriesDB.db.find({
      selector: {
        $and: [
          {_id: {"$gte": null}},
          {caloriesBurned: {$exists: true}},
          {createdAt: {$exists: true}}
        ]
      },
      fields: ['caloriesBurned', 'createdAt'],
      sort: [{'_id':'desc'}],
      limit: 7
    }).then(result => {
      const newDocs = result.docs;
      const docCalories = newDocs.map(x => +x.caloriesBurned);

      console.log('this is map');
      console.log(docCalories);

      //This is how you should do it, to update your state correctly
      this.setState({
        series: [{
          name: "Trend (tracked)",
          data: docCalories
        }]
      });

      console.log('this is maxCalories FINAL');
      console.log(this.state.maxCalories);

    }).catch((err) =>{
      console.log(err);
    });
  }

现在，在构造函数上，您可能希望以不同的方式初始化它

constructor(props) {
  super(props);
  this.state = {
    //rest of your state
    series: [
      {
        name: "Trend (tracked)",
        data: []//<- Initialized as an empty array because initially there's no value
      }
    ]

构造函数（道具）{
超级（道具）；
此.state={
//你所在州的其他地方
系列：[
{
名称：“趋势（跟踪）”，
data:[]//您应该在componentDidMount上加载初始数据。您不必在开始时将
CarrieElements
设置为null，因为通过更新承诺中的状态，您正在覆盖该状态。现在，
MaxCarries
有什么问题吗？问题是如果我控制台.log（this.state.MaxCarries）然后它最终会在控制台中显示出来，正如我所希望的，但我在图表的系列数据中使用它的方式，它只是呈现为NaNAaaah，我明白了…是的！！！你太棒了！几天前我需要你，哈哈，我在图表数据方面遇到了很多问题，但我已经慢慢克服了。我真的被困在这里，我感谢你的帮助！