为什么我的chart.js图表​​无法在React中呈现？

Question

我已经创建了此代码示例。我正在使用React功能组件，但是由于某种原因，图表无法渲染。我认为这是因为React Hooks在条件条件下不能很好地发挥作用，但是我不明白为什么。

https://codesandbox.io/s/sparkling-darkness-e7bdj

为什么图表不显示？

我正在使用钩子，因为我不想使用一个类。看来这应该可行，而且我没有任何错误。

我如何使它工作？

Answer 1

我找到了一种解决方法。

通常，Chart构造函数调用位于componentDidMount中。 Hook的等效项是useEffect。

工作代码如下：

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";

import Chart from "chart.js";

import "./styles.css";

function App() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      const myChart = new Chart(chartRef.current, {
        type: "bar",
        data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
            {
              label: "# of Votes",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)"
              ],
              borderColor: [
                "rgba(255, 99, 132, 1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)"
              ],
              borderWidth: 1
            }
          ]
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true
                }
              }
            ]
          }
        }
      });
    }
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <canvas ref={chartRef} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);