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

Question

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

我将其设置为一个名为 maxCalories 的状态变量，位于我要映射的函数末尾。

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

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;

区域

Answer 1

所以问题是你没有更新你的系列，在你正在使用的渲染方法中 this.state.series ，但是当您更新maxCalories时你做得不对。

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

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