Next.js货币转换器交换功能：状态更新但下拉框未同步显示

你的问题核心是Input组件的下拉框是非受控组件——只设置了onChange处理状态更新，但没有把当前选中的状态值绑定到select元素上，所以React不知道要更新下拉框的显示内容。

具体修复步骤： #

1. 给Input组件传递当前选中的value
   修改父组件中Input的调用，加上value属性，把当前的convertFrom和convertTo状态传进去：

   <Input
     label="From:"
     dropdown={true}
     onChange={setConvertFrom}
     symbols={symbols}
     value={convertFrom} // 新增：绑定当前选中值
   />
   <Input
     label="To:"
     dropdown={true}
     onChange={setConvertTo}
     symbols={symbols}
     value={convertTo} // 新增：绑定当前选中值
   />
   

2. 在Input组件中把select变成受控组件
   在Input.js的select元素上添加value属性，绑定传入的value参数：

   {(dropdown && (
     <select 
       name="countries" 
       onChange={(e) => onChange(e.target.value)} 
       className="px-4 py-2 rounded-xl"
       value={value} // 新增：绑定传入的选中值
     >
     {arrOfSymbols.map((symbol) => (
       <option value={symbol} key={symbol}> {/* 优化key：用唯一的symbol代替index */}
         {symbols[symbol]}
       </option>
     ))}
     </select>
   ))}
   

   注意：把option的key从arrOfSymbols.indexOf(symbol)改成symbol，因为index会在数组顺序变化时导致组件复用错误，用唯一的symbol作为key更可靠。

3. 优化交换函数（可选但推荐）
   因为React的setState是异步的，虽然当前代码能工作，但用缓存当前值的方式更严谨，避免异步状态更新带来的潜在问题：

   const swapCurrencies = () => {
     const tempFrom = convertFrom;
     setConvertFrom(convertTo);
     setConvertTo(tempFrom);
   };
   

为什么之前加key没用？ #

key的作用是帮助React识别组件的唯一性，避免不必要的渲染或复用错误，但你的问题根本不是组件身份识别的问题——而是下拉框没有绑定当前状态值，所以即使key正确，select也不知道应该显示哪个选项。

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