React货币列表切换问题：选中Option值无法更新

问题根源 #

1. 初始base状态为空字符串，首次请求API时默认使用EUR作为基准货币，但返回的rates数据不包含EUR本身，导致下拉选项中没有EUR选项，浏览器默认选中返回结果里的第一个货币（比如AUD）。
2. 切换基准货币后，新请求返回的rates同样不包含当前选中的基准货币，下拉选项中没有对应匹配的option，浏览器无法匹配base状态值，就会保持之前选中的选项显示。
3. handleBaseChange中手动调用fetchCurrencies，加上useEffect监听base变化的自动调用，造成重复API请求。

修复方案及代码 #

修改核心点：

• 将初始base设为'EUR'，满足默认基准货币需求
• 处理API返回数据时，把基准货币本身加入选项列表（自身汇率为1），确保下拉选项能匹配当前base值
• 移除handleBaseChange中的手动请求调用，依赖useEffect自动触发

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

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

  useEffect(() => {
    fetchCurrencies(base)
  }, [base])

  const fetchCurrencies = async base => {
    try {
      const response = await fetch(
        `https://api.frankfurter.app/latest?from=${base}`
      )
      const data = await response.json()
      console.log(data)
      // 把基准货币本身加入数据列表，汇率设为1
      const currenciesData = [
        { name: base, rate: 1 },
        ...Object.keys(data.rates).map(acc => ({
          rate: data.rates[acc],
          name: acc,
        }))
      ]
      setCurrencies(currenciesData)
    } catch (error) {
      console.log(error)
    }
  }

  const handleBaseChange = e => {
    setBase(e.target.value)
  }

  return (
    <React.Fragment>
      <div className="all-currency">
        <select value={base} onChange={handleBaseChange}>
          {currencies.length > 0 &&
            currencies.map(currency => (
              <option value={currency.name} key={currency.name}>
                {currency.name}
              </option>
            ))}
        </select>
        <ul>
          {currencies.map(currency => (
            <li key={currency.name}>
              {currency.name} - {currency.rate}
            </li>
          ))}
        </ul>
      </div>
    </React.Fragment>
  )
}

export default AllCurrency

修复后效果 #

• 页面加载默认以EUR为基准货币，下拉选项包含EUR及所有其他货币，默认选中EUR
• 切换下拉选项时，base状态更新后，useEffect自动触发新请求，返回的列表包含当前基准货币，下拉框能正确显示选中的货币
• 避免了重复API请求，优化了性能

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