Блог

Я хочу, чтобы загрузочный счетчик появлялся на экране во время загрузки данных API, а затем появлялась диаграмма, а счетчик исчезал, как только все это загружалось.

Мне удалось заставить счетчик появиться, но диаграмма никогда не загружается — я обращаюсь к API, и ошибок нет, я знаю, что мой код неправильный, будь то порядок и т. Д. Но я не могу понять, как заставить все это сочетаться.

код приведен ниже

 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;
 

Вы должны использовать оператор NOT для переменной загрузки внутри троичного оператора, чтобы отобразить диаграмму при извлечении данных.

 ...
{!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"/> }
...
 

Список литературы:

Реагируйте. AJAX и API. https://reactjs.org/docs/faq-ajax.html . (Доступ к декабрю 2020 года)