在使用react钩子时，如何在react-chartjs中使用动态数据？

Question

我正在尝试使用react-chartjs-2制作条形图。我的状态中有图表数据，但它需要一些时间才能显示出来，因为数据来自API。我试着用if else解决这个问题，但是它不起作用。我想知道在图表中放置动态数据的正确方法。

代码：

import React, { useContext, useEffect } from "react";
import { Bar } from "react-chartjs-2";
import { Context } from "../../../store/store";

import "./Chart.scss";

const Chart = () => {
  const [state, dispatch] = useContext(Context);

   console.log(state.audioFeatures);//data I want to show

  const data = {
    labels: [
      "acousticness",
      "danceability",
      "energy",
      "instrumentalness",
      "liveness",
      "speechiness",
      "valence",
    ],
    datasets: [
      {
        label: "My First dataset",

        fillColor: "white",
        backgroundColor: [
          "rgba(255, 99, 132, 0.3)",

        ],
        borderColor: [
          "rgba(255,99,132,1)"

        ],
        gridLines: { color: "white" },
        borderWidth: 1,
        hoverBackgroundColor: "rgba(255,99,132,0.4)",
        hoverBorderColor: "rgba(255,99,132,1)",
        data:""
      },
    ],
  };

  return (
    <div className="chart-container">
      <div>
        {state.audioFeatures ? (
          <Bar
            data={data}
            width={700}
            height={500}
            options={{
              maintainAspectRatio: false,
            }}
          />
        ) : null}
      </div>
    </div>
  );
};

export default Chart;

Answer 1

你有没有尝试过这样的东西：

          <Bar
            data={state.audioFeatures}
            ...
          />

或者：

  const data = {
    labels: [
      ...
    ],
    datasets: [
      {
        ...
        data: state.audioFeatures 
      },
    ],
  };

  return (
    <div className="chart-container">
      <div>
        {state.audioFeatures ? (
          <Bar
            data={data}
            ...
          />
        ) : null}
      </div>
    </div>
  );