反应：如何在 API 数据加载到我的 chart.js 图表时显示加载微调器

Question

I want a loading spinner to appear on the screen whilst API data loads and then the chart to appear and the spinner to disappear once it's all loaded.

I have managed to get the spinner to appear but the chart does not ever load - I am accessing the API and there are no errors, I know my code is wrong whether it's the order, etc.. but I cannot work out how to get it all to fit together.

code is below

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import * as ReactBootStrap from 'react-bootstrap';
import axios from "axios";
import './Chart.css';

const Chart3 = () => {
    //Setting states for later use
  const [chartData, setChartData] = useState({});
  const [chartItem, setChartItem] = useState(null);
  const [loading, setLoading] = useState(false);

  const Chart = async () => {
      //Setting up variables to store data
    let Fore = [];
    let Act = [];
    try{
      const data = await axios
        .get('https://api.carbonintensity.org.uk/intensity/2020-09-01T15:30Z/2020-09-10T17:00Z')
        .then(res => {
          console.log(res);
          for (const dataObj of res.data.data) {
            Fore.push(parseInt(dataObj.intensity.forecast));
            Act.push(parseInt(dataObj.intensity.actual));
            setChartItem(res.data.data);
          }
          //Now setting chart data now we have the data from API and parsed it 
          setLoading(true)
          setChartData({
            labels: Fore,
            datasets: [
              {
                label: "Carbon Intensity Levels",
                data: Act,
                backgroundColor: "#F58A07",
                borderWidth: 4
              }
            ]
          });
      })
    } catch (e) {
      console.log(e)
    }

    useEffect(() => {
    Chart();
    }, []);
  }




//Chart is rendered below - data is accessed from chartData and the settings of the chart is configured under options
  return (
    <div className="App">
      <h1></h1>
      <div className="chart">
        {loading ? 
        <Line
          data={chartData}
          options={{
            responsive: true,
            title: { text: "2020-09-01T15:30Z - 2020-09-10T17:00Z", display: true },
            scales: {
              yAxes: [
                {
                  ticks: {
                    autoSkip: true,
                    maxTicksLimit: 100,
                    beginAtZero: true
                  },
                  gridLines: {
                    display: false
                  },
                  scaleLabel: {
                      display: true,
                      labelString: "Actual"
                  }
                }
              ],
              xAxes: [
                {
                  gridLines: {
                    display: false
                  },
                  scaleLabel: {
                      display: true,
                      labelString: "Forecast"
                  }

                }
              ]
            }
          }} /> : <ReactBootStrap.Spinner animation="border"/> }
      </div>
    </div>
  );
};

export default Chart3;

Answer 1

You have to use the NOT operator on the loading variable within the ternary operator to get the chart to display when data is fetched.

...
{!loading ? 
            <Line
              data={chartData}
              options={{
                responsive: true,
                title: { text: "2020-09-01T15:30Z - 2020-09-10T17:00Z", display: true },
                scales: {
                  yAxes: [
                    {
                      ticks: {
                        autoSkip: true,
                        maxTicksLimit: 100,
                        beginAtZero: true
                      },
                      gridLines: {
                        display: false
                      },
                      scaleLabel: {
                          display: true,
                          labelString: "Actual"
                      }
                    }
                  ],
                  xAxes: [
                    {
                      gridLines: {
                        display: false
                      },
                      scaleLabel: {
                          display: true,
                          labelString: "Forecast"
                      }
    
                    }
                  ]
                }
              }} /> : <ReactBootStrap.Spinner animation="border"/> }
...

References:

React. AJAX and APIs. https://reactjs.org/docs/faq-ajax.html . (Accessed December 2020)