Svelte中getRange函数运行报ReferenceError: renge未定义怎么解决

存在两处拼写错误：

1. getRange函数内判断typ == 2的分支中，将变量名range误写为renge，JS无法识别未声明的变量，直接抛出你收到的ReferenceError错误。
2. Svelte模板的each循环存在拼写问题：循环声明写的是{#each itmes as itme}，数组名itmes、循环变量itme均拼写错误，和后续调用的item.typ不匹配，就算修复了第一个问题后续也会抛出变量未定义错误。

• 修正getRange函数内的变量拼写，把renge = "C-D"修改为range = "C-D"
• 修正模板each循环的拼写，保证数组名、循环变量名和后续调用的命名一致

修正后代码示例 #

函数部分 #

const getRange = function (typ) {
  let range = 0;
  if (typ == 0) {
    range = "A-B";
  } else if (typ == 1) {
    range = "B-c";
  } else if (typ == 2) {
    range = "C-D";
  } else {
    range = "C-D";
  }
  return range;
};

模板部分 #

{#each items as item}
    <strong>{getRange(item.typ)}</strong>
    <br />   
{/each}

可选优化 #

可以用对象映射替代多层if else，代码更简洁易维护：

const getRange = (typ) => {
  const rangeMap = {
    0: "A-B",
    1: "B-c",
    2: "C-D"
  }
  return rangeMap[typ] ?? "C-D"
}

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