我是 React JS 的新手，我正在构建一个货币转换器，但我似乎遇到了一个错误，不知道为什么会发生。 当我从选择下拉菜单中更改货币时，我收到以下错误 “未捕获（在承诺中）TypeError：无法读取未定义的属性（读取'AED'）”

我想知道代码出了什么问题，有人可以帮忙吗？

我的 APP.jsx 代码是

import React, {useEffect, useState} from 'react';
import './App.css';
import CurrencyRow from './CurrencyRow';


var myHeaders = new Headers();
myHeaders.append("apikey", "API key here");

var requestOptions = {
  method: 'GET',
  redirect: 'follow',
  headers: myHeaders
};

const BASE_URL = `https://api.apilayer.com/exchangerates_data/latest`;




function App() {

  const [currencyOptions, setCurrencyOptions] = useState([]);
  const [toCurrency, setToCurrency] = useState();
  const [fromCurrency, setFromCurrency] = useState();
  const [exchangeRate, setExchangeRate] = useState();
  const [amount, setAmount] = useState(1);
  const [amountInFromCurrency, setAmountInFromCurrency] = useState(true);

  let toAmount, fromAmount
  if (amountInFromCurrency){
    fromAmount = amount
    toAmount = amount * exchangeRate
  } else{
    toAmount = amount
    fromAmount = amount / exchangeRate
  }


  useEffect(()=> {
    fetch(BASE_URL, requestOptions)
    .then(res => res.json())
    .then(data => {
      const firstCurrency = Object.keys(data.rates)[0]
      setCurrencyOptions([data.base, ...Object.keys(data.rates)])
      setFromCurrency(data.base);
      setToCurrency(firstCurrency);
      setExchangeRate(data.rates[firstCurrency])
    });
  }, [])

  useEffect(() => {
    if(fromCurrency != null && toCurrency !== null){
      fetch(`${BASE_URL}?symbols=${toCurrency}&base=${fromCurrency}`,requestOptions)
      .then(res => res.json)
      .then(data => setExchangeRate(data.rates[toCurrency]))
    }
  }, [fromCurrency, toCurrency])

  function handleFromAmountChange(e){
    setAmount(e.target.value)
    setAmountInFromCurrency(true)
  }
  function handleToAmountChange(e){
    setAmount(e.target.value)
    setAmountInFromCurrency(false)
  }

  return (
    <>
        <div>convert</div>
        <CurrencyRow
          currencyOptions = {currencyOptions}
          selectedCurrency = {fromCurrency}
          onChangeCurrency = {e => setFromCurrency(e.target.value)}
          onChangeAmount = {handleFromAmountChange}
          amount = {fromAmount}
          />
        <div>=</div>
        <CurrencyRow
          currencyOptions = {currencyOptions}
          selectedCurrency = {toCurrency}
          onChangeCurrency = {e => setToCurrency(e.target.value)}
          onChangeAmount = {handleToAmountChange}
          amount = {toAmount}
          />
      </>
  );
}

export default App;

我制作了一个组件，这是 CurrencyRow 的代码

import React from 'react'

export default function CurrencyRow(props) {
  const {
    currencyOptions,
    selectedCurrency,
    onChangeCurrency,
    onChangeAmount,
    amount
  } = props
  return (
    <div>
      <input type="number" className="input" value={amount} onChange={onChangeAmount}/>
      <select value={selectedCurrency} onChange={onChangeCurrency}>
        {currencyOptions.map(options => (
          <option key={options} value={options}>{options}</option>
        ))}
        
      </select>
    </div>
  )
}