javascript - 状態を reactchart databar:datasets:data に渡すことはできませんか?

Question

sqlserver からデータを取得しようとしていて、reactchart.js を使用して棒グラフとして表示したいと考えています。sqlserver からデータを取得し、状態に設定しました。reactchart データバーで状態を使用できないのはなぜですか?

次のエラーが表示されます。私は反応するのが初めてです。ここで何が欠けていますか。

EditComponent.js:41 Uncaught TypeError: 未定義のプロパティ 'executionresults' を読み取れません

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;