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

问题描述

我已经减少/映射数据库查询以返回像这样的数组docCalories: [123,456,789,345,234,678,234]，这是我想要的

I've reduced/mapped my database query to return an array like this docCalories: [123,456,789,345,234,678,234] which is how I want it

在我要映射的函数的末尾，将其设置为状态变量maxCalories.

I'm setting this to a state variable called maxCalories at the end of that function where I'm mapping.

问题是，我试图将maxCalories的值用作另一个用于顶点图表的状态变量，但它不起作用，我想知道是否是因为我的图表series值在状态和maxCalories一起使用，而映射和设置maxCalories的函数在componentDidMount函数中完成.该图表是在页面加载时呈现的，因此我只是想弄清楚如何在状态数据中使用maxCalories来显示我的图表.

The problem is, I'm trying to use the value of maxCalories as another state variable which is used for an apex-chart but it's not working and I'm wondering if it's because my chart series value is in the state along with maxCalories while the function that maps and sets maxCalories is done in a componentDidMount function. The chart is rendered on page load so I'm just trying to figure out how I can use maxCalories in the state data for my chart.

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;

rea

推荐答案

，因此问题在于您没有在使用this.state.series的渲染方法中更新系列，而是在更新maxCalories您做得不正确.

so the issue is that you're not updating your series, down in your render method you're using this.state.series, but when you're updating maxCalories you're not doing it right.

  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);
    });
  }

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

now, on your constructor, you might want to initialize it differently

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
      }
    ]

我认为这应该可以解决您的问题并避免出现任何问题

I think this should solve your problem and avoid any issues

这篇关于在状态数据中使用状态值为React应用程序中的顶点图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！