JavaScript中如何在map方法内部嵌套使用map进行列表遍历？

问题排查&修正方案 #

错误原因 #

• 内层map的写法不符合模板字符串插值规则：你将.map逻辑写在了${}插值语法的外部，${item.active}只会把数组转为普通字符串输出，后续的.map代码不会被JS执行，只会作为普通文本渲染
• 内层map没有返回li字符串，也没有将返回的数组通过join('')拼接为完整字符串，直接插入数组会自动携带逗号分隔符
• 所有卡片的id属性写为固定值，重复id会导致折叠交互完全失效
• 补充：原生HTML的类名属性是class，className是React JSX的专属写法，如果你是直接操作原生DOM的innerHTML，需要把所有className替换为class才能正确加载样式。

修正后代码 #

document.getElementById("accordionExample").innerHTML = top.map((item, index) => {
  // 生成唯一id避免冲突
  const collapseId = `collapse-${index}`;
  const headingId = `heading-${index}`;
  return `
  <div class="card">
    <div class="card-header" id="${headingId}">
      <h2 class="mb-0 collapsed" data-toggle="collapse" data-target="#${collapseId}" aria-expanded="true" aria-controls="${collapseId}">${item.name}</h2>
    </div>
    <div id="${collapseId}" class="collapse" aria-labelledby="${headingId}" data-parent="#accordionExample">
      <div class="card-body">
        <ul>
          ${item.active.map(act => `<li>${act.name}</li>`).join('')}
        </ul>
      </div>
    </div>
  </div>`
}).join('');

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