Как использовать данные Dynami c в диаграмме реакции js при использовании хуков реакции?

Question

Я пытаюсь создать гистограмму, используя реактивную диаграмму js -2. У меня есть данные диаграммы в моем состоянии, но для их отображения требуется некоторое время, поскольку данные поступают из API. Я пытался решить эту проблему, используя if else, но это не сработало. Я хочу знать, как правильно разместить данные Dynami c в диаграмме.

Код:

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