我正在尝试从sqlserver获取数据,并希望使用reactchart.js以条形图的形式呈现。我从sqlserver提取了数据并将其设置为state。为什么我不能使用reactchart数据栏中的状态?
我收到以下错误。我是新来的人,我在这里想念什么。
EditComponent.js:41未捕获的TypeError:无法读取属性 不确定的“执行结果”
import React from "react";
import { Bar } from "react-chartjs-2";
import axios from "axios";
class ChartsPage extends React.Component {
constructor(props) {
super(props);
//this.props.pass=[];
//this.props.fail=[];
this.state = { executionresults: [] };
}
componentDidMount() {
axios
.get("http://localhost:5000/modulewise")
.then(response => {
// console.log(response.data.recordset);
// console.log(response.data.recordset[0].moduleName);
// this.setState({ chartlabels: response.data.recordset.moduleName,chartpass: response.data.recordset.PASS,chartfail: response.data.recordset.FAIL });
this.setState({ executionresults: response.data.recordset });
// console.log(this.state.executionresults);
const pass = this.state.executionresults.map(result => result.PASS);
console.log(
this.state.executionresults.map(result => result.moduleName)
);
console.log(this.state.executionresults.map(result => result.PASS));
console.log(this.state.executionresults.map(result => result.FAIL));
console.log(this.props.pass);
})
.catch(function(error) {
console.log(error);
});
}
state1 = {
dataBar: {
labels: this.state.executionresults.map(result => result.moduleName), //["AccountManagement", "BeneficiaryManagement", "CreditCards", "Incidents_Complaints", "Investments", "IPO", "LeaseTransfer", "QuickPay", "SADAD"],//["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], //this.state.modstate,//
//this.state.executionresults.map(result=> result.moduleName),//
datasets: [
{
label: "PASS",
data: [0, 2, 4, 1, 0, 0, 6, 0, 35], //[12, 39, 3, 50, 2, 32, 84], //this.state.passstate,//
backgroundColor: "Green", //rgba(245, 74, 85, 0.5)
borderWidth: 1
},
{
label: "FAIL",
data: [2, 4, 17, 10, 6, 1, 11, 5, 18], //[56, 24, 5, 16, 45, 24, 8], //this.state.failstate,//
backgroundColor: "orange", //"rgba(90, 173, 246, 0.5)",
borderWidth: 1
}
]
},
barChartOptions: {
responsive: true,
maintainAspectRatio: true,
scales: {
xAxes: [
{
barPercentage: 1,
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
}
}
],
yAxes: [
{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
},
ticks: {
beginAtZero: true
}
}
]
}
}
};
render() {
return (
<div>
<Bar data={this.state1.dataBar} options={this.state1.barChartOptions} />
</div>
);
}
}
export default ChartsPage;
答案 0 :(得分:0)
问题是this
中的state1
引用了state1
对象,但没有引用组件实例!
要传递正确的数据,您可以使用数组的.map
方法即时修改。我认为您根本不需要state1
。可以在const data
方法中添加render
,因为您可以在将所需的数据传递到<Bar />
组件之前进行准备。
render() {
const data = {
dataBar: {
labels: this.state.executionresults.map(result => result.moduleName),
datasets: [
{
label: "PASS",
data: [0, 2, 4, 1, 0, 0, 6, 0, 35],
backgroundColor: "Green",
borderWidth: 1
},
{
label: "FAIL",
data: [2, 4, 17, 10, 6, 1, 11, 5, 18],
backgroundColor: "orange",
borderWidth: 1
}
]
},
barChartOptions: {
responsive: true,
maintainAspectRatio: true,
scales: {
xAxes: [
{
barPercentage: 1,
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
}
}
],
yAxes: [
{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
},
ticks: {
beginAtZero: true
}
}
]
}
}
};
return (
<div>
<Bar data={data.dataBar} options={data.barChartOptions} />
</div>
);
}