Динамический API с использованием Astro и React

Недавно я начал свой путь веб-разработчика и решил изучить 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>

Я вставил ваш компонент в codeandbox (в обычное приложение React, а не в Astro), и значения были заполнены сразу же без каких-либо настроек. Я думал, что это может быть связано с async/await в useEffect, но теперь я менее уверен. Может быть, было бы полезно сравнить среду песочницы со средой разработки, чтобы увидеть, в чем разница? Я недостаточно знаю об Астро, чтобы предположить, что это может изменить.

devon 05.05.2024 18:44

Попробуйте записать данные в консоль и проверить, все ли в порядке.

Chukwujiobi Canon 05.05.2024 18:44

Я вижу, как говорится в документации, Astro хорош со статическими веб-сайтами, это было просто для того, чтобы попытаться повозиться с моим существующим веб-сайтом, и создание чего-то с нуля только в реакции должно работать лучше. Все еще работаю над своим javascript!

Sefanco 05.05.2024 19:03
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
310
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я не думаю, что export const CoinDeskAPI — это правильный подход для компонентов React. Поместите это в такую ​​функцию, как:

function CoinDeskAPI() {
  // rest of your code
}

export default CoinDeskAPI;

Подход OP здесь хорош, они используют стиль объявления функции const myFunc = () => {}, который является допустимым способом объявления функционального компонента React.

devon 05.05.2024 18:36

Да, я не получаю никаких ошибок в объявлениях или чего-то в этом роде, информация просто не отображается, и я не знаю, почему

Sefanco 05.05.2024 18:38
Ответ принят как подходящий

Чтобы сделать компонент 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, работающих на сервере.

Другие вопросы по теме