React useParams动态设置货币转换器默认币种求助

以下是修改后的完整代码，已实现通过useParams获取的id动态设置默认目标币种：

import axios from 'axios';
import CurrencyInput from 'components/atoms/CurrencyInput/CurrencyInput';
import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

function CalculatorNew() {
  const { id } = useParams();
  const [amount1, setAmount1] = useState(1);
  const [amount2, setAmount2] = useState(1);
  const [currency1, setCurrency1] = useState('PLN');
  // 用路由参数id作为默认目标币种，兜底USD避免id无效
  const [currency2, setCurrency2] = useState(id || 'USD');
  const [rates, setRates] = useState({});

  useEffect(() => {
    axios
      .get(
        'https://api.apilayer.com/fixer/latest?base=PLN&apikey='
      )
      .then((response) => {
        setRates(response.data.rates);
      });
  }, []);

  // 监听id变化，自动更新目标币种并重新计算金额
  useEffect(() => {
    if (id && rates[id]) {
      setCurrency2(id);
      handleCurrency2Change(id);
    }
  }, [id, rates]);

  useEffect(() => {
    if (Object.keys(rates).length > 0) {
      handleAmount1Change(1);
    }
  }, [rates]);

  function format(number) {
    return number.toFixed(4);
  }

  function handleAmount1Change(amount1) {
    setAmount2(format((amount1 * rates[currency2]) / rates[currency1]));
    setAmount1(amount1);
  }

  function handleCurrency1Change(currency1) {
    setAmount2(format((amount1 * rates[currency2]) / rates[currency1]));
    setCurrency1(currency1);
  }

  function handleAmount2Change(amount2) {
    setAmount1(format((amount2 * rates[currency1]) / rates[currency2]));
    setAmount2(amount2);
  }

  function handleCurrency2Change(currency2) {
    setAmount1(format((amount2 * rates[currency1]) / rates[currency2]));
    setCurrency2(currency2);
  }

  return (
    <div>
      <h1>Currency Converter</h1>
      <CurrencyInput
        onAmountChange={handleAmount1Change}
        onCurrencyChange={handleCurrency1Change}
        currencies={Object.keys(rates)}
        amount={amount1}
        currency={currency1}
      />
      <CurrencyInput
        onAmountChange={handleAmount2Change}
        onCurrencyChange={handleCurrency2Change}
        currencies={Object.keys(rates)}
        amount={amount2}
        currency={currency2}
      />
    </div>
  );
}

export default CalculatorNew;

修改要点说明： #

• 补充缺失导入：原代码未导入useState和useEffect，添加后确保组件正常运行。
• 动态初始化目标币种：将currency2的初始值设为id || 'USD'，路由参数id存在时优先使用，否则用USD兜底。
• 监听id变化：新增useEffect监听id和汇率数据的变化，确保id对应的币种有效时，自动更新目标币种并触发金额重计算。
• 优化初始状态：将rates初始值从数组改为空对象，避免Object.keys(rates)处理数组时出现异常。
• 简化初始化逻辑：调整汇率加载后的初始化流程，直接调用handleAmount1Change(1)替代嵌套函数。

内容的提问来源于stack exchange，提问作者Veronica