javascript - React/API/Chart.js : Expected an assignment or function call and instead saw an expression

Question

我正在关注AJAX和API的文档(https://reactjs.org/docs/faq-ajax.html)，以便能够获取我的API数据，在加载时显示加载微调器，并在加载后显示图表。
但是，我遇到了以下错误:第31:7行:期望执行赋值或函数调用，而是看到一个表达式。代码如下:
Chart3.js

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

function MyComponent() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  const [chartData, setChartData] = useState({});

  // Note: the empty deps array [] means
  // this useEffect will run once
  // similar to componentDidMount()
  useEffect(() => {

    let Fore = [];
    let Act = [];
    
    fetch('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));
        setIsLoaded(true);
      }
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
      (error) => {
        setIsLoaded(true);
        setChartData({
          labels: Fore,
          datasets: [
            {
              label: "Carbon Intensity Levels",
              data: Act,
              backgroundColor: "#F58A07",
              borderWidth: 4
            }
          ]
          });
          setError(error);
      }})
  }, [])

  if (error) {
    return  <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div> <ReactBootStrap.Spinner animation="border"/> </div>;
  } else {
    return (
      <div className="App">
        <h1></h1>
        <div className="chart">
          <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"
                    }

                  }
                ]
              }
            }} />
        </div>
      </div>
    );
  }
}

export default MyComponent;

它说的错误是在第31行，它是代码“(错误)=> {...”的一部分

Answer 1

感谢您的帮助，该解决方案无法正常工作，但是我在下面找到了可以正常工作的代码段。

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

function MyComponent() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [chartData, setChartData] = useState({});

  // Note: the empty deps array [] means
  // this useEffect will run once
  // similar to componentDidMount()
  useEffect(() => {

    let Fore = [];
    let Act = [];
     
    fetch('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));
        setIsLoaded(true);
      }
         // Note: it's important to handle errors here
         // instead of a catch() block so that we don't swallow
         // exceptions from actual bugs in components.
      })
      .catch((error) => {
        setIsLoaded(true);
        setChartData({
          labels: Fore,
          datasets: [
            {
              label: "Carbon Intensity Levels",
              data: Act,
              backgroundColor: "#F58A07",
              borderWidth: 4
            }
          ]
          });
          setError(error);
      })
  }, [])

  if (error) {
    return  <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div> <ReactBootStrap.Spinner animation="border"/> </div>;
  } else {
    return (
      <div className="App">
        <h1></h1>
        <div className="chart">
          <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"
                    }

                  }
                ]
              }
            }} />
        </div>
      </div>
    );
  }
}

export default MyComponent;

但是，现在我已经捕获了错误，它正在屏幕上显示“错误:无法读取未定义的属性'data'”，所以我认为我的api数据可能无法正确解析，但无法解决原因