嵌套函数中if else无法修改id变量的技术问题

核心原因 #

你的问题出在变量作用域绑定或异步执行顺序上：

• 嵌套的thing异步函数内部，可能重新声明了id变量（比如用let id/var id），导致它成为局部变量，无法修改外部作用域的id。
• 或者异步函数执行时，外部id已被后续代码覆盖——异步操作不阻塞主线程，后续代码可能先于异步逻辑执行。

修复步骤 #

1. 移除嵌套函数内的变量重声明 #

确保thing函数内部直接赋值外部id，不重新声明同名变量：

async function populate() {
  let id = ''; // 外部作用域的id变量
  async function thing() {
    let spell = await fetch('https://www.dnd5eapi.co/api/spells/your-target-spell');
    // 直接修改外部id，不重新声明
    if (spell.school.name === 'Conjuration') {
      id = 'conjuration';
    } else if (spell.school.name === 'Enchantment') {
      id = 'enchantment';
    }
    // 其他法术属性判断逻辑...
  }
  await thing();
  // 此时id已被正确修改，可用于渲染目录卡片
}

2. 用返回值传递结果（更稳妥） #

如果作用域问题难以排查，让嵌套异步函数返回计算后的id，再赋值给外部变量：

async function populate() {
  async function thing() {
    let spell = await fetch('https://www.dnd5eapi.co/api/spells/your-target-spell');
    let spellId = '';
    if (spell.school.name === 'Conjuration') {
      spellId = 'conjuration';
    } else if (spell.school.name === 'Enchantment') {
      spellId = 'enchantment';
    }
    // 其他属性判断...
    return spellId;
  }
  // 接收异步函数返回的id值
  let id = await thing();
  // 渲染目录卡片
  renderDirectoryCard(id);
}

3. 确认异步执行顺序 #

确保修改id的逻辑执行完成后，再调用渲染目录卡片的代码——必须用await等待thing()执行完毕，避免渲染逻辑先于异步赋值运行。

验证方法 #

在thing函数内添加console.log(id)，在populate中await thing()后也添加console.log(id)：

• 若内部输出正确、外部输出为初始值：说明存在作用域重声明问题。
• 若内部输出也错误：检查API返回的spell.school.name拼写/大小写是否与判断条件匹配（D&D API返回的是英文名称，比如Conjuration而非中文）。

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