Диаграмма * js не отображается внутри модального элемента React bootstrap

Question

Я создал модал React Bootstrap. В модальном теле я хочу показать диаграмму из диаграммы JS. Кажется, что все работает как ожидается в модальном теле. Я пробовал таблицы и текст, но по какой-то причине он не показывает компонент диаграммы. Я не могу понять, почему он это сделал.

Код для визуализации React Modal:

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>
    </>
  );
};

<PowerConsumptionChart /> - это мой компонент диаграммы со следующим кодом:

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

Answer 1

Итак, я смог найти решение этой проблемы. У меня нет конкретного объяснения этой проблемы. Но я решил это, используя onEnter, функцию обратного вызова, сработавшую до того, как модальные переходы вошли.

Я изменил свою функцию без сохранения состояния на компонент класса. Это ни на что не влияет, я просто сделал это.

Ниже мой код:

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>
      </>
    );
  }
}