我已经减少/映射了我的数据库查询以返回这样的数组 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;
区域
最佳答案
所以问题是你没有更新你的系列,在你正在使用的渲染方法中 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
}
]
我认为这应该可以解决您的问题并避免任何问题
关于javascript - 在 React 应用程序中使用顶点图表的状态数据中的状态值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60920394/