React中动态货币汇率选择器的实现与优化

import React, { useState, useEffect } from 'react';

function AllCurrency() {
  const [currencies, setCurrencies] = useState([]);
  // 将基础货币的初始值设置为 'EUR'，确保有默认选中项
  const [base, setBase] = useState('EUR'); 

  useEffect(() => {
    // 当 base 状态变化时，重新获取货币数据
    fetchCurrencies(base);
  }, [base]); // 依赖数组包含 base，确保 base 变化时触发

  const fetchCurrencies = async base => {
    try {
      const response = await fetch(
        `https://api.frankfurter.app/latest?from=${base}`
      );
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();

      // API返回的rates不包含基础货币本身，因此需要特殊处理
      // 这里的处理方式是只将非基础货币的汇率加入列表
      // 如果需要基础货币也出现在列表中，需要额外添加
      const currenciesData = Object.keys(data.rates).map(acc => ({
        rate: data.rates[acc],
        name: acc,
      }));
      setCurrencies(currenciesData);
    } catch (error) {
      console.error("获取货币数据失败:", error);
      // 可以添加用户友好的错误提示
    }
  };

  // ... (handleBaseChange 和 JSX 渲染部分)
}

export default AllCurrency;

// ... (AllCurrency 组件内部)

  const handleBaseChange = e => {
    setBase(e.target.value);
    // 移除此处对 fetchCurrencies 的直接调用
    // 因为 useEffect 已经监听了 base 的变化，会自动触发数据获取
  };

  return (
    <React.Fragment>
      <div className="all-currency">
        <select value={base} onChange={handleBaseChange}>
          {/* 确保当前的基础货币始终作为第一个选项出现，并设置其value */}
          {base && (
            <option value={base} key={base}>
              {base}
            </option>
          )}
          {/* 渲染从API获取的其他货币选项 */}
          {currencies.length > 0 &&
            currencies.map(currency => (
              <option value={currency.name} key={currency.name}>
                {currency.name}
              </option>
            ))}
        </select>
        <ul>
          {/* 渲染货币汇率列表 */}
          {/* 注意：如果需要显示基础货币对自身的汇率（如EUR - 1），需要额外处理 currencies 数组 */}
          {currencies.map(currency => (
            <li key={currency.name}>
              {currency.name} - {currency.rate.toFixed(4)} {/* 格式化汇率显示 */}
            </li>
          ))}
        </ul>
      </div>
    </React.Fragment>
  );
}

export default AllCurrency;

import React, { useState, useEffect } from 'react';

function AllCurrency() {
  const [currencies, setCurrencies] = useState([]);
  const [base, setBase] = useState('EUR'); // 初始化基础货币为EUR

  useEffect(() => {
    fetchCurrencies(base); // base 变化时自动获取数据
  }, [base]);

  const fetchCurrencies = async base => {
    try {
      const response = await fetch(
        `https://api.frankfurter.app/latest?from=${base}`
      );
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();

      // 将汇率数据转换为数组格式
      const currenciesData = Object.keys(data.rates).map(acc => ({
        rate: data.rates[acc],
        name: acc,
      }));
      setCurrencies(currenciesData);
    } catch (error) {
      console.error("获取货币数据失败:", error);
      // 在生产环境中，这里可以显示用户友好的错误消息
    }
  };

  const handleBaseChange = e => {
    setBase(e.target.value); // 更新 base 状态，useEffect 会自动响应
  };

  return (
    <React.Fragment>
      <div className="all-currency">
        <label htmlFor="currency-select">选择基础货币:</label>
        <select id="currency-select" value={base} onChange={handleBaseChange}>
          {/* 确保当前的基础货币作为选项出现，并设置其value */}
          {base && (
            <option value={base} key={base}>
              {base}
            </option>
          )}
          {/* 渲染从API获取的其他货币选项 */}
          {currencies.length > 0 &&
            currencies.map(currency => (
              <option value={currency.name} key={currency.name}>
                {currency.name}
              </option>
            ))}
        </select>
        <h3>当前汇率 (基于 {base}):</h3>
        <ul>
          {/* 渲染货币汇率列表 */}
          {/* 如果需要显示基础货币对自身的汇率（如 EUR - 1），可以手动添加 */}
          {currencies.map(currency => (
            <li key={currency.name}>
              {currency.name} - {currency.rate.toFixed(4)}
            </li>
          ))}
        </ul>
      </div>
    </React.Fragment>
  );
}

export default AllCurrency;