如何使用CoinGecko API实现React加密货币转换器？修复转换异常

核心问题分析 #

你遇到的fromRate/toRate undefined、转换结果NaN，本质是API端点选择错误或请求参数格式不对，导致无法正确获取汇率数据。以下是针对性的修复步骤：

1. 选择正确的CoinGecko API端点 #

CoinGecko提供两个适合转换场景的端点，按需选择：

端点1：/simple/price（获取基础汇率，自行计算转换） #

适合需要同时获取多币种汇率的场景，通过中间货币（比如USD）计算转换比例：

// 示例：获取BTC和ETH对USD的汇率，计算1 BTC能换多少ETH
const fetchRates = async (fromSlug, toSlug) => {
  const res = await fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${fromSlug},${toSlug}&vs_currencies=usd`);
  const data = await res.json();
  
  const fromRate = data[fromSlug]?.usd;
  const toRate = data[toSlug]?.usd;
  return { fromRate, toRate };
};

端点2：/simple/convert（直接返回转换结果） #

无需自行计算，直接传入金额、源币种、目标币种即可得到结果：

// 示例：转换10 BTC到ETH
const convertAmount = async (amount, fromSlug, toSlug) => {
  const res = await fetch(`https://api.coingecko.com/api/v3/simple/convert?amount=${amount}&id=${fromSlug}&vs_currency=${toSlug}`);
  const data = await res.json();
  
  return data[fromSlug]?.[toSlug];
};

2. 代码逻辑修复 #

假设你的组件有fromCurrency、toCurrency、amount三个状态，以下是完整的转换函数示例：

用/simple/price实现转换 #

const handleConvert = async () => {
  try {
    // 注意：这里传入的是币种slug（如bitcoin、ethereum），不是符号（BTC、ETH）
    const { fromRate, toRate } = await fetchRates(fromCurrency, toCurrency);
    
    if (!fromRate || !toRate) throw new Error("无法获取汇率数据");
    
    const result = (amount * fromRate) / toRate;
    setResult(result.toFixed(6)); // 保留6位小数
  } catch (err) {
    console.error(err);
  }
};

用/simple/convert实现转换 #

const handleConvert = async () => {
  try {
    const converted = await convertAmount(amount, fromCurrency, toCurrency);
    
    if (!converted) throw new Error("转换失败");
    
    setResult(converted.toFixed(6));
  } catch (err) {
    console.error(err);
  }
};

3. 关键注意事项 #

• 币种参数必须是slug值：CoinGecko API的ids参数要求传入币种的slug（如bitcoin对应BTC），不是符号。如果你的下拉选单存的是符号，需要先做映射：

  // 加载币种列表时存储slug和符号的对应关系
  fetch('https://api.coingecko.com/api/v3/coins/list?include_platform=false')
    .then(res => res.json())
    .then(coins => {
      // coins结构：[{id: 'bitcoin', symbol: 'btc', name: 'Bitcoin'}, ...]
      setCoinList(coins);
    });
  

• 避免请求频率超限：CoinGecko免费API有请求限制，开发时可添加简单缓存，避免重复调用。
• 调试技巧：在fetch后打印返回的data，确认数据结构是否符合预期，排查参数错误。

内容的提问来源于stack exchange，提问作者André Luís