React货币转换器JSX切换按钮失效问题求助

我基于React开发一款货币转换器，设置了两个下拉框供用户选择转换的货币类型，并添加了切换按钮期望实现已选货币的互换功能，但该功能无法正常工作。已在各操作中添加控制台日志，确认选择操作时组件状态能正常输出，但handleFlip函数并未实际完成货币选中状态的互换，怀疑问题出在handleFlip事件处理函数或下拉框组件逻辑中，相关代码如下：

父组件代码 #

function App() {
  const [fromCurrency, setFromCurrency] = useState("USD");
  const [toCurrency, setToCurrency] = useState("EUR");
  const [amount, setAmount] = useState('');
  const [result, setResult] = useState(0);
  const [flip, setFlip] = useState(false);
  const [loading, setLoading] = useState(false);

  const currencyList = ["USD", "EUR", "GBP", "CAD", "MXN", "COP"];

  const handleFromCurrencyChange = (event) => {
    console.log("From currency changed to:", event.target.value);
    setFromCurrency(event.target.value);
  };

  const handleToCurrencyChange = (event) => {
    console.log("To currency changed to:", event.target.value);
    setToCurrency(event.target.value);
  };

  const handleAmountChange = (event) => {
    setAmount(event.target.value);
  };

  const handleFlip = () => {
    const currentFromCurrency = fromCurrency;
    const currentToCurrency = toCurrency;

    setFromCurrency(currentToCurrency);
    setToCurrency(currentFromCurrency);
    
    console.log("Flip");
  };

  return (
    <div className="wrapper flex flex-col items-center px-4 py-8">
      <div className="wrapper flex flex-col items-center px-4 py-8">
        <Header />

        <CurrencySelector
          currencyList={currencyList}
          fromCurrency={fromCurrency}
          toCurrency={toCurrency}
          handleFromCurrencyChange={handleFromCurrencyChange}
          handleToCurrencyChange={handleToCurrencyChange}
        />
        <HiOutlineSwitchHorizontal 
          className="text-2xl text-blue-500 cursor-pointer mx-4 "
          onClick={handleFlip}
        />

        <Input 
          handleAmountChange={handleAmountChange} 
          amount={amount} 
        />

        <ConvertButton className="bg-blue-500 text-white px-4 py-2 rounded-md mb-4" />
        <Result className="text-2xl font-bold" />
      </div>
    </div>
  );
}

货币选择器组件代码 #

const CurrencySelector = ({
  currencyList,
  fromCurrency,
  toCurrency,
  handleFromCurrencyChange,
  handleToCurrencyChange,
}) => {
  return (
    <div className="flex items-center justify-center mb-6">
      <FromCurrency
        currencyList={currencyList}
        onChange={handleFromCurrencyChange}
        className="mr-2"
        value={fromCurrency}
      />
      <ExchangeLogo />
      <ToCurrency
        currencyList={currencyList}
        onChange={handleToCurrencyChange}
        className="ml-2"
        value={toCurrency}
      />
    </div>
  );
};

const FromCurrency = ({ currencyList, onChange, className, value }) => {
  return (
    <select
      onChange={onChange}
      className={`border border-gray-300 rounded-lg shadow-sm px-4 py-3 w-32 focus:outline-none focus:ring-2 focus:ring-blue-300 mb-4 ${className}`}
    >
      {currencyList.map((currency) => (
        <option key={currency} value={currency}>
          {currency}
        </option>
      ))}
    </select>
  );
};

const ToCurrency = ({ currencyList, onChange, className, value }) => {
  return (
    <select
      onChange={onChange}
      className={`border border-gray-300 rounded-lg shadow-sm px-4 py-3 w-32 focus:outline-none focus:ring-2 focus:ring-blue-300 mb-4 ${className}`}
    >
      {currencyList.map((currency) => (
        <option key={currency} value={currency}>
          {currency}
        </option>
      ))}
    </select>
  );
};

问题原因及解决方案 #

问题根源 #

FromCurrency和ToCurrency组件中，虽然接收了父组件传递的value props，但并未将该值绑定到<select>元素的value属性上。React中受控表单组件需要通过value属性与状态绑定，否则状态更新后，表单元素不会同步显示最新值。

修复代码 #

修改FromCurrency组件，给<select>添加value={value}：

const FromCurrency = ({ currencyList, onChange, className, value }) => {
  return (
    <select
      onChange={onChange}
      value={value} // 新增：绑定value到状态
      className={`border border-gray-300 rounded-lg shadow-sm px-4 py-3 w-32 focus:outline-none focus:ring-2 focus:ring-blue-300 mb-4 ${className}`}
    >
      {currencyList.map((currency) => (
        <option key={currency} value={currency}>
          {currency}
        </option>
      ))}
    </select>
  );
};

修改ToCurrency组件，同样添加value={value}：

const ToCurrency = ({ currencyList, onChange, className, value }) => {
  return (
    <select
      onChange={onChange}
      value={value} // 新增：绑定value到状态
      className={`border border-gray-300 rounded-lg shadow-sm px-4 py-3 w-32 focus:outline-none focus:ring-2 focus:ring-blue-300 mb-4 ${className}`}
    >
      {currencyList.map((currency) => (
        <option key={currency} value={currency}>
          {currency}
        </option>
      ))}
    </select>
  );
};

说明 #

handleFlip函数本身逻辑是正确的，它已经完成了fromCurrency和toCurrency状态的互换。修复下拉框的value绑定后，状态变更会同步到UI，互换功能即可正常工作。

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