ReactJS：如何用API数据填充下拉框并解决空选项与NaN问题

看起来你已经成功拿到了API数据（控制台能打印出货币代码就说明这步没问题👍），问题出在下拉选项的渲染逻辑和汇率计算的取值上，咱们一步步来修复：

1. 修复下拉选项的渲染 #

你提到下拉框填充了但选项为空，大概率是渲染<option>时没正确设置显示文本和value属性。假设你的JSX里有类似这样的下拉框，按下面的方式调整：

<select 
  value={this.state.convertTo} 
  onChange={e => this.setState({ convertTo: e.target.value })}
>
  {this.state.currencies.map(currency => (
    // 必须设置key、value和显示文本
    <option key={currency} value={currency}>
      {currency}
    </option>
  ))}
</select>

关键点：

• 每个<option>要加key（React列表渲染的强制要求）
• value属性绑定货币代码，确保选中后convertTo能拿到正确值
• <option>内部要写{currency}作为显示文本，否则选项会是空的

另外，API返回的rates里不包含基准货币（比如你的默认USD），可以把它也加到货币列表里：

// 在setState时补充基准货币
this.setState({ currencies: [data.base, ...Object.keys(data.rates)] });

2. 修复汇率计算的NaN问题 #

选择后显示NaN，说明你计算汇率时没正确获取到对应汇率值。建议把完整的rates数据也存在state里，而不只是货币代码：

state = {
  currencies: [],
  base: "USD",
  amount: "",
  convertTo: "EUR",
  result: "",
  rates: {} // 新增存储汇率的字段
};

componentDidMount() {
  fetch("https://api.exchangeratesapi.io/latest")
    .then(response => response.json())
    .then(data => {
      // 同时存储汇率和货币列表
      this.setState({
        rates: data.rates,
        currencies: [data.base, ...Object.keys(data.rates)]
      });
    })
    .catch(error => console.log(error));
}

然后写一个专门的计算方法，在金额或目标货币变化时触发：

calculateResult = () => {
  const { amount, base, convertTo, rates } = this.state;
  const numAmount = parseFloat(amount);

  // 处理无效输入或基准货币转自身的情况
  if (isNaN(numAmount)) {
    this.setState({ result: "" });
    return;
  }
  if (base === convertTo) {
    this.setState({ result: numAmount.toFixed(2) });
    return;
  }

  // 从rates中获取对应货币的汇率并计算
  const rate = rates[convertTo];
  if (rate) {
    const result = (numAmount * rate).toFixed(2);
    this.setState({ result });
  } else {
    this.setState({ result: "" });
  }
};

最后在输入框和下拉框的onChange里调用这个方法：

<input
  type="number"
  value={this.state.amount}
  onChange={e => {
    this.setState({ amount: e.target.value }, this.calculateResult);
  }}
/>

<select
  value={this.state.convertTo}
  onChange={e => {
    this.setState({ convertTo: e.target.value }, this.calculateResult);
  }}
>
  {/* 选项渲染代码同上 */}
</select>

3. 额外优化：初始化默认结果 #

可以在componentDidMount的setState回调里调用calculateResult，让页面加载时就显示默认的USD转EUR结果：

this.setState(
  {
    rates: data.rates,
    currencies: [data.base, ...Object.keys(data.rates)]
  },
  this.calculateResult // 组件更新后自动计算初始结果
);

这样调整后，下拉框应该能正常显示货币代码，选择后也能算出正确的汇率结果啦！

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