无法将状态传递给reactchart databar:datasets:data?

时间:2019-03-26 09:20:28

标签: javascript reactjs react-chartjs

我正在尝试从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;

1 个答案:

答案 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>
    );
  }