मैंने इस तरह की एक सरणी वापस करने के लिए अपनी डेटाबेस क्वेरी को कम/मैप किया है docCalories: [123,456,789,345,234,678,234] जो कि मैं इसे कैसे चाहता हूं

मैं इसे उस फ़ंक्शन के अंत में maxCalories नामक एक स्टेट वेरिएबल पर सेट कर रहा हूं जहां मैं मैपिंग कर रहा हूं।

समस्या यह है कि, मैं अधिकतम कैलोरी के मान को एक अन्य राज्य चर के रूप में उपयोग करने का प्रयास कर रहा हूं जिसका उपयोग शीर्ष-चार्ट के लिए किया जाता है लेकिन यह काम नहीं कर रहा है और मुझे आश्चर्य है कि ऐसा इसलिए है क्योंकि मेरा चार्ट series मान राज्य में है 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;

रिया

2
Tom N. 29 मार्च 2020, 23:34

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

मुझे लगता है कि इससे आपकी समस्या का समाधान होना चाहिए और किसी भी समस्या से बचना चाहिए

4
Edgar Henriquez 29 मार्च 2020, 21:14