未捕获到的TypeError：无法解构“未定义”或“空”的属性“权重”

时间：2019-05-09 08:12:06

标签： javascript html

我要执行的任务是根据特定说明构建BMI计算器。我已按照所有指示操作，但似乎出了点问题。我似乎遵循的这一阶段的说明说：

  

步骤1   在<div class="my-navbar"> <center> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> <a href="Home.html"> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> </a> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> <a href="Information.html"> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> </a> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> <a href="Schedule.html"> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> </a> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> <a href="#" onClick="document.getElementById('id01').style.display='block'"> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> </a> <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" /> </center> </div> .navbar-button { margin: 0; padding: 0; display: block; text-align: center; margin-left: auto; margin-right: auto; height: 10%; float:left; width:200px; } 上方，创建一个需要用户参数的getSelectedUser箭头函数，但立即将其分解为computeBMI，weight和height属性。   第2步   返回country，并从SELECT元素中获取所选值，然后将该值传递给letsCalculateBMI函数调用，该函数调用应返回所选值的getSelectedUser。该用户对象应分配给user object变量。

     

此时，user已准备好计算用户的BMI。它应该通过调用letsCalculateBMI并将其传递给用户来实现。然后，它将调用computeBMI的返回值设置为computeBMI变量，该变量最终被设置为#outcome DIV中的PARAGRAPH的文本内容

     

BMEye使用高级算法来计算BMI！ BMEye的饮食概念是最健康的国家/地区，例如乍得，塞拉利昂，马里，冈比亚，乌干达，加纳，塞内加尔，索马里，科特迪瓦和伊斯雷尔。如果用户来自这些国家中的任何一个，则计算得出的BMI值乘以0.82，使它降低一点。

     

第3步   按照上面的指南和提示，获取bmi以使用用户的体重，身高和国家/地区来计算并返回用户的BMI值。

当我选择一个用户时，一切似乎都可以正常运行，但是挑战给了我一个错误computeBMI 

Awwww snap! Your BMI calculation is not correct. Review the instructions and continue
const users = [];

const countriesWithLowerBmi = ["Chad", "Sierra Leone", "Mali", "Gambia", "Uganda", "Ghana", "Senegal", "Somalia", "Ivory Coast", "Isreal"];

const featToMeter = 0.3048;

const bmiCountryRatio = 0.82;

const computeBMI = ({
  weight,
  height,
  country
}) => {

  const heightInMeters = height * featToMeter;
  let BMI = weight / (heightInMeters ^ 2);

  if (countriesWithLowerBmi.includes(country))
    BMI *= bmiCountryRatio;

  return Math.round(BMI, 2);
};

const getSelectedUser = (userId) => {
  return users.find(({
    id
  }) => id === userId);
};

const displaySelectedUser = ({
  target
}) => {
  const user = getSelectedUser(target.value);
  const properties = Object.keys(user);

  properties.forEach(prop => {
    const span = document.querySelector(`span[data-${prop}-value]`);
    if (span) {
      span.textContent = user[prop];
    }
  })
}

const letsCalculateBMI = () => {

  const value = document.querySelector('.select-text').value;

  const user = getSelectedUser(value);

  const bmi = computeBMI(user);

  document.querySelector('.bmi-text').innerHTML = bmi
};

const powerupTheUI = () => {
  const button = document.querySelector('#oracle');

  const select = document.querySelector('.select-text');

  select.addEventListener('change', displaySelectedUser);

  button.addEventListener('click', letsCalculateBMI);
};

const displayUsers = (users) => {
  users.forEach(user => {
    const select = document.querySelector('.select-text');
    const option = document.createElement('option');

    option.text = user.name;
    option.value = user.id;
    select.appendChild(option);
  });
};


const fetchAndDisplayUsers = () => {
  users.push({
    age: 40,
    weight: 75,
    height: 6,
    country: 'Nigeria',
    name: 'Charles Odili',
    id: 'dfhb454768DghtF'
  }, {
    age: 23,
    weight: 68,
    height: 6,
    country: 'Nigeria',
    name: 'Simpcy',
    id: 'gibb12erish'
  });

  displayUsers(users);
};

const startApp = () => {
  powerupTheUI();
  fetchAndDisplayUsers();
};

startApp();

3 个答案:

答案 0 :(得分：0)

如果computeBMI找不到用户，请不要致电getSelectedUser。

const letsCalculateBMI = () => {
  const value = document.querySelector('.select-text').value;
  const user = getSelectedUser(value);
  if (user) {
    const bmi = computeBMI(user);
    document.querySelector('.bmi-text').innerHTML = bmi
  } else {
    document.querySelector('.bmi-text').innerHTML = '';
};

答案 1 :(得分：0)

尝试一下： const stars = ["Chad", "Sierra Leone", "Mali", "Gambia", "Uganda", "Ghana", "Senegal", "Somalia", "Ivory Coast", "and Isreal"]; 

  const myComputeBMI = ({ weight, height, country }) => {
    const hInMeters = height * 0.3048;
    const value = (weight / (hInMeters * hInMeters)) 
      * (stars.includes(country) ? 0.82 : 1);
    return parseFloat(value).toFixed(1);
  };

答案 2 :(得分：-1)

通过提供默认值来解决此问题：

const computeBMI = ({
  weight,
  height,
  country
} = {weight: 0, height: 0, country: 0}) => {/*...*/}
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ this is new


console.clear();
const users = [];

const countriesWithLowerBmi = ["Chad", "Sierra Leone", "Mali", "Gambia", "Uganda", "Ghana", "Senegal", "Somalia", "Ivory Coast", "Isreal"];

const featToMeter = 0.3048;

const bmiCountryRatio = 0.82;

const computeBMI = ({
  weight,
  height,
  country
} = {weight: 0, height: 0, country: 0}) => {

  const heightInMeters = height * featToMeter;
  let BMI = weight / (heightInMeters ^ 2);

  if (countriesWithLowerBmi.includes(country))
    BMI *= bmiCountryRatio;

  return Math.round(BMI, 2);
};

const getSelectedUser = (userId) => {
  return users.find(({
    id
  }) => id === userId);
};

const displaySelectedUser = ({
  target
}) => {
  const user = getSelectedUser(target.value);
  const properties = Object.keys(user);

  properties.forEach(prop => {
    const span = document.querySelector(`span[data-${prop}-value]`);
    if (span) {
      span.textContent = user[prop];
    }
  })
}

const letsCalculateBMI = () => {

  const value = document.querySelector('.select-text').value;

  const user = getSelectedUser(value);

  const bmi = computeBMI(user);

  document.querySelector('.bmi-text').innerHTML = bmi
};

const powerupTheUI = () => {
  const button = document.querySelector('#oracle');

  const select = document.querySelector('.select-text');

  select.addEventListener('change', displaySelectedUser);

  button.addEventListener('click', letsCalculateBMI);
};

const displayUsers = (users) => {
  users.forEach(user => {
    const select = document.querySelector('.select-text');
    const option = document.createElement('option');

    option.text = user.name;
    option.value = user.id;
    select.appendChild(option);
  });
};


const fetchAndDisplayUsers = () => {
  users.push({
    age: 40,
    weight: 75,
    height: 6,
    country: 'Nigeria',
    name: 'Charles Odili',
    id: 'dfhb454768DghtF'
  }, {
    age: 23,
    weight: 68,
    height: 6,
    country: 'Nigeria',
    name: 'Simpcy',
    id: 'gibb12erish'
  });

  displayUsers(users);
};

const startApp = () => {
  powerupTheUI();
  fetchAndDisplayUsers();
};

startApp();
<div class="select">
  <select class="select-text">
    <option disabled selected>Select User</option>
  </select>
</div>

<div class="user-photo">
  <img src="https://via.placeholder.com/200" alt="Placeholder">
</div>

<div class="details mdc-elevation--z3">
  <p>
    <span class="prop" data-age>Age :</span>
    <span class="value" data-age-value>23 years</span>
  </p>
  <p>
    <span class="prop" data-height>Height :</span>
    <span class="value" data-height-value>169cm</span>
  </p>
  <p>
    <span class="prop" data-weight>Weight :</span>
    <span class="value" data-weight-value>68kg</span>
  </p>
  <p>
    <span class="prop" data-gender>Gender :</span>
    <span class="value" data-gender-value>Female</span>
  </p>
  <p>
    <span class="prop" data-country>Country :</span>
    <span class="value" data-country-value>Nigerian</span>
  </p>
</div>

<button id="oracle" class="mdc-button">
      Calculate BMI
    </button>
<div id="outcome">
  <h5 class="mdc-typography--headline5">
    BMI
  </h5>
  <p class="bmi-text"></p>
</div>

相关问题
最新问题