未定义的获取对象抛出错误？

问题描述

从 http://www.dnd5eapi.co/ API 获取数据时，

使用函数通过字符串模板字面量呈现 HTML，但如果从 fetch 返回的对象值未定义，则会导致错误并且不会生成其他 HTML 元素。

const renderRaceDescription = function (data) {
  const html = `
  <h3 class="class_name">${data.name}</h3>
  <h4 class="class_size">${data.size}</h3>
  <p class="class_size-description">${data.size_description}</h3>
  <p class="class_size-description">${data.alignment}</h3>
  <p class="class_size-description">${data.language_desc}</h3>
  <h4 class="class_trait-title">Traits:</h3>
  <p class="class_traits">${data.traits[0].name}</h3>
  <p class="class_traits">${data.traits[1].name}</h3>
  <p class="class_traits">${data.traits[2].name}</h3>
  `;
  raceDescriptionContainer.insertAdjacentHTML('beforeend',html)
}

例如，如果 ${data.traits[1].name} 返回 undefined，则会呈现错误并且不会填充其他 HTML 元素

const raceSelect = document.getElementById('races')
const classSelect = document.getElementById('classes');
const raceDescriptionContainer = document.querySelector('.race-description')


const renderRaceDescription = function (data) {
  const html = `
  <h3 class="class_name">${data.name}</h3>
  <h4 class="class_size">${data.size}</h3>
  <p class="class_size-description">${data.size_description}</h3>
  <p class="class_size-description">${data.alignment}</h3>
  <p class="class_size-description">${data.language_desc}</h3>
  <h4 class="class_trait-title">Traits:</h3>
  <p class="class_traits">${data.traits[0].name}</h3>
  <p class="class_traits">${data.traits[1].name}</h3>
  <p class="class_traits">${data.traits[2].name}</h3>
  `;
  raceDescriptionContainer.insertAdjacentHTML('beforeend',html)
}

const renderError = function (msg) {
  raceDescriptionContainer.insertAdjacentHTML('beforeend',msg)
}

// Pull race data and populate select element
const getRaces = async function () {
  try {
    const res = await fetch(`https://www.dnd5eapi.co/api/races/`);
    const data = await res.json();
    const races = await data.results.map((entries) => {
      return entries.name;
    });
    console.log(races);
    races.forEach((el) => {
      const opt = document.createElement('option');
      opt.innerHTML = el;
      opt.value = el;
      raceSelect.appendChild(opt);
    });
  } catch (err) {
    console.log('Error - Could not retrieve race data');
  }
};

// Pull class data and populate select element
const getClasses = async function () {
  try {
    const res = await fetch(`https://www.dnd5eapi.co/api/classes`);
    const data = await res.json();
    const classes = await data.results.map((entries) => {
      return entries.name;
    });
    console.log(classes);
    classes.forEach((el) => {
      const opt = document.createElement('option');
      opt.innerHTML = el;
      opt.value = el;
      classSelect.appendChild(opt);
    });
  } catch (err) {
    console.log('Error - Could not retrieve class data');
  }
};


const getRaceInfo = async function (race) {
  try {
    const res = await fetch(`https://www.dnd5eapi.co/api/races/${race}/`)
    const data = await res.json()
    renderRaceDescription(data)
  } catch (err) {
    renderError(err.message)
  }
}

const getClassInfo = async function (classstring) {
  try {
    const res = await fetch(`https://www.dnd5eapi.co/api/classes/${classstring}/`)
    const data = await res.json()
    console.log(data)
  } catch (err) {
    renderError(err.message)
  }
}

// getClassInfo('rogue')

raceSelect.addEventListener('change',(e) => {
  raceDescriptionContainer.innerHTML = ' '
  const race = e.target.value.toLowerCase()
  getRaceInfo(race)
})

getClasses();
getRaces() 

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）