#javascript #reactjs #api #error-handling
#javascript #reactjs #API #обработка ошибок
Вопрос:
Я следую документации здесь (https://reactjs.org/docs/faq-ajax.html ) чтобы AJAX и API могли получать данные моего 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, которая является частью кода «(ошибка) => {…»
Комментарии:
1. Ваш синтаксис выборки неверен. Сравните его с примером, который вы связали.
Ответ №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;
Однако теперь, когда я обнаружил ошибку, на экране отображается сообщение «Ошибка: не удается прочитать свойство «данные» неопределенного», поэтому я думаю, что мои данные api, возможно, не анализируются должным образом, но не могу понять, почему
Ответ №2:
Попробуйте с этим.
useEffect(() => {
let Fore = [];
let Act = [];
fetch('https://api.carbonintensity.org.uk/intensity/2020-09-01T15:30Z/2020-09-10T17:00Z')
.then(res => res.json())
.then(data => {
for (const dataObj of data.data) {
Fore.push(parseInt(dataObj.intensity.forecast));
Act.push(parseInt(dataObj.intensity.actual));
}
setIsLoaded(true);
})
.catch((error) => {
setIsLoaded(true);
setChartData({
labels: Fore,
datasets: [
{
label: "Carbon Intensity Levels",
data: Act,
backgroundColor: "#F58A07",
borderWidth: 4
}
]
});
setError(error);
})
}, [])
Комментарии:
1. Спасибо, я реализовал это, что избавило от одной ошибки, но теперь ошибка гласит «Ошибка: res.data.data не повторяется», поэтому я попытаюсь исправить это сейчас
2. Попробуйте использовать этот обратный вызов во 2-м, затем( (({data}) => { data.forEach(dataObj => { Fore.push(parseInt(dataObj.intensity.forecast)); Act.push(parseInt(dataObj.intensity.actual)); }); setIsLoaded(true) }))
3. Не сработало, но решило это, поместив a .наконец, в конце и установив там setIsLoaded(true)