我正在尝试使用来自外部api调用的点从GraphJS制作一个Graph,但是由于aim字符串将状态数据设置为常量,所以点未显示。 该组件已经有一个常量,我正在尝试从那里的api设置一些数据,但不确定我在做什么错。
import Grid from "@material-ui/core/Grid";
import { classes } from "../constants/dashboard";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import React, { Component } from "react";
import { Line } from "react-chartjs-2";
import moment from "moment";
import axios from "axios";
class Avg extends Component {
constructor(props) {
super(props);
this.state = {
formFields: { from: "", to: "" },
score: 1,
finalDate: ["2019-06-01"]
};
const data = {
labels: this.state.finalDate,
datasets: [
{
label: "Score",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: this.state.score
}
]
};
}
render() {
return (
<div>
<form style={{ display: "inline-flex", padding: "15px" }}>
<Grid item xs>
<TextField
id="from"
label="De"
type="date"
name="from"
//value={this.name}
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true
}}
formatDate={from => moment(from).format("DD-MM-YYYY")}
onChange={e => this.inputChangeHandler.call(this, e)}
value={this.state.formFields.from}
/>{" "}
</Grid>{" "}
<Grid item xs>
<TextField
id="date"
label="Até"
type="date"
name="to"
//value={this.target.value}
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true
}}
formatDate={date => moment(date).format("DD-MM-YYYY")}
onChange={e => this.inputChangeHandler.call(this, e)}
value={this.state.formFields.to}
/>{" "}
</Grid>{" "}
<Grid item xs>
<Button
type="button"
variant="contained"
className={classes.button}
onClick={e => this.getData(this.state.formFields)}
>
Submit{" "}
</Button>{" "}
</Grid>{" "}
</form>
<h2>Média</h2>
<Line data={this.data} />
</div>
);
}
getData = async (from, to) => {
from = this.state.formFields.from;
to = this.state.formFields.to;
try {
let res = await axios.get(
`http://localhost:3000/issues/periodic/count?from=${from}&to=${to}`
);
let data = res.data;
let finalDate = [];
let score = data.map(s => s.count);
let date = data.map(d =>
finalDate.push(`${d._id.year}-${d._id.month}-${d._id.day}`)
);
console.log(score);
console.log(finalDate);
this.setState({
score: score,
dates: finalDate
});
} catch (error) {
console.log(error);
}
};
inputChangeHandler(e) {
e.preventDefault();
let formFields = { ...this.state.formFields };
formFields[e.target.name] = e.target.value;
this.setState({
formFields
});
}
componentDidMount() {
this.getData();
}
}
export default Avg;
图形未显示,但我没有错误。有帮助吗?