TypeError: Cannot read properties of undefined in the conversion app 如何解决

Question

运行以下语句后，它会在控制台选项卡中显示以下错误

在控制台中运行的命令convert(100, 'CAD', 'USD')

运行上述转换声明请求后控制台显示错误

`暂停 promise 拒绝类型错误：无法读取未定义的属性

在此处的代码 64 行 const rate = ratesByBase[from].rates[to];`

以下是我的完整代码库

let currencies = {
    AUD: 'Australian Dollar',
    BGN: 'Bulgarian Lev',
    BRL: 'Brazilian Real',
    CAD: 'Canadian Dollar',
    CHF: 'Swiss Franc',
    CNY: 'Chinese  Yuan',
    CZK: 'Czech Republic Koruna',
    DKK: 'Danish Krone',
    GBP: 'British Pound Sterling',
    HKD: 'Hong Kong Dollar',
    HRK: 'Croatian Kuna',
    HUF: 'Hungarian Forint',
    IDR: 'Indonesian Rupiah',
    ILS: 'Israeli New Sheqel',
    INR: 'Indian Rupee',
    JPY: 'Japanese Yen',
    KRW: 'South Korean Won',
    MXN: 'Mexican Peso',
    MYR: 'Malaysian Ringgit'
 }

 const fromSelect = document.querySelector('[name="from_currency"]');
 const toSelect = document.querySelector('[name="to_currency"]');
 const fromInput = document.querySelector('[name="from_amount"]');

 let myHeaders = new Headers();
 myHeaders.append("apikey", "QC9I9O0LPCFUfStGMD1h5CKcWN4Aehrk");

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

 const endpoint = "https://api.apilayer.com/currency_data/live";

 let ratesByBase = {};


 function generateOptions(options) {
    return Object.entries(options)
       .map(([currencyCode, currencyName]) =>
          `<option value="${currencyCode}">${currencyCode} - ${currencyName}</option>`)
       .join("");
 }

 async function fetchRates(base = "USD") {
    const res = await fetch(`${endpoint}?base=${base}`, requestOptions);
    const rates = await res.json();
    return rates;
 }

 async function convert(amount, from, to) {
    // first check if we even have the rates to convert from that currency
    if (!ratesByBase[from]) {
       console.log(`Oh no! we don't have ${from} to convert it ${to}, so let 's go get it`);
       const rates = await fetchRates(from);
       console.log(rates);
       // store them for next time
       ratesByBase[from] = rates;
    }

    const rate = ratesByBase[from].rates[to];
    const convertedAmount = rate * amount;
    console.log('${amount} ${from} is ${convertedAmount} in ${to}');
    return convertedAmount;

 }

 const optionsHTML = generateOptions(currencies);
 // populate the options elements
 fromSelect.innerHTML = optionsHTML;
 toSelect.innerHTML = optionsHTML;

Answer 1

“ratesByBase[from]”可能未定义。

使用 typescript: const rate = ratesByBase[from]?.rates[to];

使用 javascript: const rate = ratesByBase[from]? ratesByBase[从].rates[到]: 0;