Недавно я начал свой путь веб-разработчика и решил изучить JavaScript, чтобы работать с API, чтобы научиться выполнять выборку (для начала) из общедоступного API. Моя первая попытка — интегрировать действующий API BTC в свое портфолио. Хотя API — CoinDeskAPI.
Это мой компонент CoinDeskAPI.jsx:
import { useEffect, useState } from "react";
export const CoinDeskAPI = () => {
const [btcData, setBtcData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json');
if (!response.ok) {
throw new Error('Failed to fetch Bitcoin data');
}
const data = await response.json();
setBtcData(data);
} catch (error) {
console.error('Error fetching Bitcoin data:', error);
}
};
fetchData();
}, []);
return (
<article className = "flex flex-col gap-2 flex-grow">
<header className = "flex w-full flex-row justify-between gap-2">
<h3 className = "text-xl text-neutral-950">
API Testing (<a className = "hover:text-blue-500 after:content-['_↗']" href = "https://api.coindesk.com/v1/bpi/currentprice.json" target = "_blank" rel = "noreferrer"> CoinDeskAPI</a>)
</h3>
</header>
<p className = "w-auto max-w-[60ch] leading-6 text-base">Displaying live BTC values, first API test!</p>
<article>
{btcData && (
<ul>
<li>BTC Rate (USD): {btcData.bpi.USD.rate}</li>
<li>BTC Rate (EUR): {btcData.bpi.EUR.rate}</li>
<li>BTC Rate (GBP): {btcData.bpi.GBP.rate}</li>
</ul>
)}
</article>
</article>
);
};
и вот как я передаю его в свой файл index.astro:
---
...other imports
import { CoinDeskAPI } from "../components/CoinDeskAPI.jsx";
---
<Layout title = "Portfolio">
<main class = "flex flex-col gap-20">
<!-- More code... -->
<!-- Bitcoin API section -->
<CoinDeskAPI />
</main>
</Layout>
Попробуйте записать данные в консоль и проверить, все ли в порядке.
Я вижу, как говорится в документации, Astro хорош со статическими веб-сайтами, это было просто для того, чтобы попытаться повозиться с моим существующим веб-сайтом, и создание чего-то с нуля только в реакции должно работать лучше. Все еще работаю над своим javascript!
Я не думаю, что export const CoinDeskAPI
— это правильный подход для компонентов React. Поместите это в такую функцию, как:
function CoinDeskAPI() {
// rest of your code
}
export default CoinDeskAPI;
Подход OP здесь хорош, они используют стиль объявления функции const myFunc = () => {}
, который является допустимым способом объявления функционального компонента React.
Да, я не получаю никаких ошибок в объявлениях или чего-то в этом роде, информация просто не отображается, и я не знаю, почему
Чтобы сделать компонент React интерактивным, Astro требует, чтобы вы загрузили его следующим образом:
<CoinDeskAPI client:load />
Обратите внимание: если вы загружаете данные в компонент React (с помощью useEffect
), он выполнит запрос только после загрузки базовой страницы в браузере пользователя и выполнит запрос из браузера. Чтобы ускорить процесс, сделайте запрос с сервера и передайте его как свойство компоненту:
---
import { CoinDeskAPI } from "../components/CoinDeskAPI.jsx";
const data = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json').then(res => res.json());
---
<CoinDeskAPI client:load btcData = {data} />
Обратите внимание, что в приведенном примере вы, похоже, не выполняете никаких интерактивных действий на стороне клиента. Если да, то вам вообще не нужен React, достаточно только компонентов Astro, работающих на сервере.
Я вставил ваш компонент в codeandbox (в обычное приложение React, а не в Astro), и значения были заполнены сразу же без каких-либо настроек. Я думал, что это может быть связано с async/await в useEffect, но теперь я менее уверен. Может быть, было бы полезно сравнить среду песочницы со средой разработки, чтобы увидеть, в чем разница? Я недостаточно знаю об Астро, чтобы предположить, что это может изменить.