使用 Astro 和 React 的动态 API

Question

我最近开始了我的网络开发之旅，并决定学习一些 javascript 来处理 API，以便学习如何从公共 API 执行获取（对于初学者来说）。我的第一次尝试是尝试将实时 BTC API 集成到我的投资组合中。尽管 ChatGPT 说这是正确的并且应该显示信息，但除了标题之外没有显示任何内容。 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>

Answer 1

我不认为

export const CoinDeskAPI

是 React 组件的正确方法。将其放入函数中，例如：

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

export default CoinDeskAPI;