using state value in state data for apex charts within react app

问题

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

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

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

回答1:

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

来源：https://stackoverflow.com/questions/60920394/using-state-value-in-state-data-for-apex-charts-within-react-app