Как я могу получить данные из API для отображения, когда веб-страница перестает отвечать на запросы? ⇐ CSS

[Anonymous]

Я создаю игру-угадайку, созданную с использованием React и «artsy.api». Доступ к игре в угадайку можно получить через мою индексную страницу, нажав кнопку.

{" "}
{/* Link to Guessing Game page */}
Play Guessing Game{" "}
{/* Button to navigate to Guessing Game page */}


Каждый раз, когда я нажимаю кнопку для перехода на страницу игры в угадайку, страница перестает отвечать на запросы и отображает только «Угадай исполнителя» и непосредственно под надписью «Загрузка...». Я даже не могу щелкнуть правой кнопкой мыши и проверить страницу на наличие ошибок в консоли.
GuessingGame.tsx:
import React, { useState, useEffect } from "react";
import axios from "axios"; // Import Axios
import "./GuessingGame.css";

interface Artwork {
_embedded: {
artists: { name: string }[];
};
_links: {
thumbnail: { href: string };
artists: { href: string };
};
title: string;
}

const GuessingGame: React.FC = () => {
const [artwork, setArtwork] = useState(null);
const [options, setOptions] = useState([]);
const [selectedOption, setSelectedOption] = useState(null);
const [score, setScore] = useState(0);
const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchArtworkData = async () => {
try {
const response = await axios.get("https://api.artsy.net/api/artworks", {
headers: {
"X-XAPP-Token":
"My_API_KEY",
},
});
const { _embedded } = response.data;
if (_embedded && _embedded.artworks && _embedded.artworks.length > 0) {
const randomArtwork: Artwork =
_embedded.artworks[
Math.floor(Math.random() * _embedded.artworks.length)
];
setArtwork(randomArtwork);
const randomArtists = await getRandomArtists(
randomArtwork._links.artists.href
);
const correctArtist = randomArtwork._embedded.artists[0].name;
setOptions([...randomArtists, correctArtist]);
setLoading(false);
}
} catch (error) {
console.error("Error fetching artwork data:", error);
setLoading(false);
}
};

fetchArtworkData();
}, []);

const getRandomArtists = async (artistsLink: string): Promise => {
try {
const response = await axios.get(artistsLink, {
headers: {
"X-XAPP-Token":
"My_API_KEY",
},
});
const { _embedded } = response.data;
if (_embedded && _embedded.artists) {
const randomArtists: string[] = [];
while (randomArtists.length < 3) {
const randomIndex = Math.floor(
Math.random() * _embedded.artists.length
);
const randomArtist = _embedded.artists[randomIndex].name;
if (!randomArtists.includes(randomArtist)) {
randomArtists.push(randomArtist);
}
}
return randomArtists;
}
} catch (error) {
console.error("Error fetching artists:", error);
}
return [];
};

const handleOptionSelect = (option: string) => {
setSelectedOption(option);
if (option === artwork?._embedded.artists[0].name) {
setScore(score + 1);
}
};

return (

Guess the Artist
{loading ? (
Loading...
) : artwork ? (

[img]{artwork._links.thumbnail.href}
className="artwork-thumbnail"
/>
{artwork.title}
Options:

{options.map((option, index) => (
handleOptionSelect(option)}
className={`option-button ${
selectedOption === option ? "selected" : ""
}`}
>
{option}

))}

Score: {score}

) : (
No artwork available
)}

);
};

export default GuessingGame;


Может ли кто-нибудь предложить решение по внесению изменений в код или другой подход к решению проблемы?
Я попытался добавить функцию устранения дребезга, чтобы ограничить количество вызовов API, поскольку это единственный аспект, который, по моему мнению, может быть причиной проблемы, но, похоже, не решил проблему.
import React, { useState, useEffect } from "react";
import "./GuessingGame.css";

interface Artwork {
_embedded: {
artists: { name: string }[];
};
_links: {
thumbnail: { href: string };
artists: { href: string };
};
title: string;
}

const GuessingGame: React.FC = () => {
const [artwork, setArtwork] = useState(null);
const [options, setOptions] = useState([]);
const [selectedOption, setSelectedOption] = useState(null);
const [score, setScore] = useState(0);
const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchArtworkData = async () => {
try {
const response = await fetch("https://api.artsy.net/api/artworks", {
headers: {
"X-XAPP-Token":
"eyJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6IiIsInN1YmplY3RfYXBwbGljYXRpb24iOiIzMDU2MDk0Yi05ODUwLTRjYTktOTJiNy05MWM4MWYwZTYyNDYiLCJleHAiOjE3MTUzMzQ0MDUsImlhdCI6MTcxNDcyOTYwNSwiYXVkIjoiMzA1NjA5NGItOTg1MC00Y2E5LTkyYjctOTFjODFmMGU2MjQ2IiwiaXNzIjoiR3Jhdml0eSIsImp0aSI6IjY2MzRiMjg1MTc0YmUxMDAxMmRiNDc2ZSJ9.hGIPQb-W4jHjitTo5KGWguRo0YpRqlUNIAQlKJpaDl8",
},
});
const { _embedded } = await response.json();
if (_embedded && _embedded.artworks && _embedded.artworks.length > 0) {
const randomArtwork: Artwork =
_embedded.artworks[
Math.floor(Math.random() * _embedded.artworks.length)
];
setArtwork(randomArtwork);
const randomArtists = await getRandomArtists(
randomArtwork._links.artists.href
);
const correctArtist = randomArtwork._embedded.artists[0].name;
setOptions([...randomArtists, correctArtist]);
setLoading(false);
}
} catch (error) {
console.error("Error fetching artwork data:", error);
setLoading(false);
}
};

fetchArtworkData();
}, []);

const getRandomArtists = async (artistsLink: string): Promise => {
try {
const response = await fetch(artistsLink, {
headers: {
"X-XAPP-Token":
"eyJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6IiIsInN1YmplY3RfYXBwbGljYXRpb24iOiIzMDU2MDk0Yi05ODUwLTRjYTktOTJiNy05MWM4MWYwZTYyNDYiLCJleHAiOjE3MTUzMzQ0MDUsImlhdCI6MTcxNDcyOTYwNSwiYXVkIjoiMzA1NjA5NGItOTg1MC00Y2E5LTkyYjctOTFjODFmMGU2MjQ2IiwiaXNzIjoiR3Jhdml0eSIsImp0aSI6IjY2MzRiMjg1MTc0YmUxMDAxMmRiNDc2ZSJ9.hGIPQb-W4jHjitTo5KGWguRo0YpRqlUNIAQlKJpaDl8",
},
});
const { _embedded } = await response.json();
if (_embedded && _embedded.artists) {
const randomArtists: string[] = [];
while (randomArtists.length < 3) {
const randomIndex = Math.floor(
Math.random() * _embedded.artists.length
);
const randomArtist = _embedded.artists[randomIndex].name;
if (!randomArtists.includes(randomArtist)) {
randomArtists.push(randomArtist);
}
}
return randomArtists; // Add return statement here
}
} catch (error) {
console.error("Error fetching artists:", error);
}
return []; // Add return statement here to handle other cases
};

const handleOptionSelect = (option: string) => {
setSelectedOption(option);
if (option === artwork?._embedded.artists[0].name) {
setScore(score + 1);
}
};

return (

Guess the Artist
{loading ? (
Loading...
) : artwork ? (

[img]{artwork._links.thumbnail.href}
className="artwork-thumbnail"
/>
{artwork.title}
Options:

{options.map((option, index) => (
handleOptionSelect(option)}
className={`option-button ${
selectedOption === option ? "selected" : ""
}`}
>
{option}

))}

Score: {score}

) : (
No artwork available
)}

);
};

export default GuessingGame;



Подробнее здесь: https://stackoverflow.com/questions/784 ... ng-unrespo