Javascript Chart.js图表未在React引导模式中显示

我创建了一个React引导模式。在模态体中，我想显示chartJS中的一个图表。在模态体中，一切似乎都按照预期工作。我尝试了表格和文本，但由于某些原因，它没有显示图表组件。我不明白它为什么会这样做

用于呈现React模式的代码：

const ButonModal = () => {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="outline-primary" onClick={handleShow}>
        Peak Demand
      </Button>
      <Modal show={show} onHide={handleClose} centered>
        <Modal.Header closeButton>
          <Modal.Title>
            Peak Demand
            <p style={{ fontSize: "50%" }}>
              last peak demand occurred on March 12, 2020
            </p>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <PowerConsumptionChart />
        </Modal.Body>

        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

const ButonModal=（）=>{
const[show，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
返回(
高峰需求
高峰需求

最后一次高峰需求发生在2020年3月12日

接近
);
};

是我的图表组件，包含以下代码：

class PowerConsumptionChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: {
        labels: [
          "Monday",
          "Tuesday"
        ],
        datasets: [
          {
            label: "Overall Cost",
            data: [12000, 62000],
          }
        ]
      }
    };
  }

  render() {
    return (
      <div className="chart">
        <Line
          data={this.state.chartData}
          options={{
            maintainAspectRatio: false,
            responsive: true,
            legend: {
              display: false
            }
          }}
        />
      </div>
    );
  }
}

类功耗图扩展组件{
建造师（道具）{
超级（道具）；
此.state={
图表数据：{
标签：[
“星期一”，
“星期二”
],
数据集：[
{
标签：“总成本”，
数据：[1200062000]，
}
]
}
};
}
render（）{
返回(
);
}
}

所以我找到了这个问题的解决方案。我对这个问题没有具体的解释。但我通过使用

oneter

解决了这个问题，这是一个在中的模式转换之前启动的回调函数

我将无状态函数更改为类组件。这不影响任何事，我只是做了

下面是我的代码：

class ButtonModal extends Component {
  state = { loaded: false, show: false };

  setShow = flag => {
    this.setState({ show: flag });
  };

  handleClose = () => {
    this.setShow(false);
    this.setState({ loaded: false });
  };
  handleShow = () => {
    this.setShow(true);
  };

  handleLoad = () => {
    this.setState({ loaded: true });
  };

  render() {
    return (
      <>
        <Button variant="outline-primary" onClick={this.handleShow}>
          Peak Demand
        </Button>
        <Modal
          show={this.state.show}
          onHide={this.handleClose}
          onEnter={this.handleLoad}
          size="lg"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title>
              Peak Demand <PeakDemandTooltip />
              <p
                style={{ fontSize: "50%", fontWeight: "normal", color: "grey" }}
              >
                last peak demand occurred on March 12, 2020
              </p>
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {this.state.loaded && <PowerConsumptionChart />}
          </Modal.Body>

          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}

class按钮模型扩展组件{
状态={loaded:false，show:false}；
setShow=标志=>{
this.setState（{show:flag}）；
};
handleClose=（）=>{
此.setShow（假）；
this.setState（{loaded:false}）；
};
handleShow=（）=>{
这个.setShow（true）；
};
手动加载=（）=>{
this.setState（{loaded:true}）；
};
render（）{
返回(
高峰需求
高峰需求

最后一次高峰需求发生在2020年3月12日

{this.state.loaded&&}
接近
);
}
}

所以我找到了这个问题的解决方案。我对这个问题没有具体的解释。但我通过使用

oneter

解决了这个问题，这是一个在中的模式转换之前启动的回调函数

我将无状态函数更改为类组件。这不影响任何事，我只是做了

下面是我的代码：

class ButtonModal extends Component {
  state = { loaded: false, show: false };

  setShow = flag => {
    this.setState({ show: flag });
  };

  handleClose = () => {
    this.setShow(false);
    this.setState({ loaded: false });
  };
  handleShow = () => {
    this.setShow(true);
  };

  handleLoad = () => {
    this.setState({ loaded: true });
  };

  render() {
    return (
      <>
        <Button variant="outline-primary" onClick={this.handleShow}>
          Peak Demand
        </Button>
        <Modal
          show={this.state.show}
          onHide={this.handleClose}
          onEnter={this.handleLoad}
          size="lg"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title>
              Peak Demand <PeakDemandTooltip />
              <p
                style={{ fontSize: "50%", fontWeight: "normal", color: "grey" }}
              >
                last peak demand occurred on March 12, 2020
              </p>
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {this.state.loaded && <PowerConsumptionChart />}
          </Modal.Body>

          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}

class按钮模型扩展组件{
状态={loaded:false，show:false}；
setShow=标志=>{
this.setState（{show:flag}）；
};
handleClose=（）=>{
此.setShow（假）；
this.setState（{loaded:false}）；
};
handleShow=（）=>{
这个.setShow（true）；
};
手动加载=（）=>{
this.setState（{loaded:true}）；
};
render（）{
返回(
高峰需求
高峰需求

最后一次高峰需求发生在2020年3月12日

{this.state.loaded&&}
接近
);
}
}