无法将 json 数据中的值显示到图表 js 中

Question

I am using react js. I want to make a chart using chartjs from the data I fetched from the api. Here, I just want to plot the chart between the below two arrays.

  symbolsdateforchart: []
  closingdateforchart: []

But, I am not sure how to use the value of these (please have a look at my code) since it has not been assigned yet, and the value get assigned in componentDidMount() and I making my chart inside this.state . Is there a better way to make the chart using chartjs between the above two array I mentioned. Or can I make this work somehow? Any help is appreciated.

My code:

 import React from "react";

import { Line } from "react-chartjs-2";
import Chart from "./Chart";

export default class Symbols extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
      symbolsdateforchart: [],
      closingdateforchart: [],
       search: "",
      symbol: this.props.location.symbol,

     //here I am making my chart

      chartData: {
        labels: ["how to add the data of symbolsdateforchart here"], //and here I know the data is not yet assigned to symbolsdateforchart: [], so not sure how to make it work
        datasets: [
          {
            label: "Closing price",
            data: ["how to add the data of closingdateforchart here"], //and here I know the data is not yet assigned to closingdateforchart: [], so not sure how to make it work
            fill: false,

            backgroundColor: [
              "rgba(255,99,132,0.6)",
              "rgba(54,162,235,0.6)",
              "rgba(255,206,86,0.6)",
              "rgba(75,192,192,0.6)",
              "rgba(153,102,255,0.6)",
              "rgba(255,159,64,0.6)",
              "rgba(255,99,132,0.6)",
            ],
          },
        ],
      },

    };
  }

  componentDidMount() {
    let symbolsdate = [];
    let closingprice = [];

    fetch(`http://131.181.190.87:3001/history?symbol=${this.state.symbol}`)
      .then((res) => res.json())

      .then((json) => {
        console.log(json);
        for (const dataobj of json) {
          let tempsymbolsDate = dataobj.timestamp.split("T")[0];
          let tempclosingPrice = dataobj.close;
          let tempArray = tempsymbolsDate.split("-");
          tempsymbolsDate =
            tempArray[2] + "/" + tempArray[1] + "/" + tempArray[0];

          symbolsdate.push(tempsymbolsDate);
          closingprice.push(tempclosingPrice);
        }
        this.setState({
          isLoaded: true,
          items: json,
           //here the value get assigned for them
          symbolsdateforchart: symbolsdate,
          closingdateforchart: closingprice,
        });
      });

  }


  render() {

    return (
      //here I just print the table using the api I fetched in omponentDidMount()

    );
  }
}

Answer 1

In componentDidMount() you can update state variable chartData as

this.setState({
   isLoaded: true,
   items: json,
   chartData: {
     labels: symbolsdate,
     datasets: [{...this.state.chartData.datasets, data: closingprice}]
   }
});

Better is to separate dynamic part from static. Store static data like backgroundColor outside of state & provide statically in HTML of render() while, use state variables for dynamic data.