使用DOM渲染摄影师卡片时出现undefined错误

控制台能正常输出拼接完成的photographerList字符串，说明JSON解析、卡片字符串拼接的逻辑没有问题，故障100%出在字符串写入DOM的最后一步环节，常见触发原因和修复方式如下：

• 变量作用域不匹配：你在控制台打印的是局部作用域内的正确字符串，但实际执行DOM赋值时，引用的是全局作用域下同名的未初始化变量，值为undefined
• 异步时序错误：如果数据是接口请求拿到的，你打印字符串的逻辑写在异步回调内，但DOM赋值逻辑写在了回调外部，执行赋值时photographerList还未被赋值，控制台显示的正确打印值是异步请求完成后才输出的，DOM赋值操作早于变量赋值执行
• 链式赋值写法错误：如果写了类似let dom = document.querySelector('.card-container').innerHTML = photographerList的链式赋值，后续误将dom（该场景下赋值顺序问题会导致拿到意外返回值）重复写入容器，就会渲染出undefined
• DOM节点获取失败：执行赋值时没有拿到目标容器节点（比如脚本执行早于DOM解析，拿到null），给null设置innerHTML的异常会导致后续渲染逻辑异常，最终显示undefined

快速排查步骤 #

1. 定位到你给卡片容器设置innerHTML的代码行，在这行紧前面加一行打印：

   console.log('DOM赋值时的变量值：', photographerList)
   console.log('获取到的容器节点：', document.querySelector('.你的卡片容器选择器'))
   

   如果这行打印的photographerList是undefined，直接追溯该位置变量的定义来源，和你之前打印出正确值的变量做对比，确认是不是同名变量作用域冲突；如果容器节点打印为null，就把脚本引入放到HTML底部，或者加DOMContentLoaded事件监听等DOM加载完成再执行渲染。
2. 修正DOM赋值写法，不要用链式赋值，拆开写避免返回值异常：

   // 错误写法 易出现返回值问题
   // const cardWrap = document.querySelector('.card-wrap').innerHTML = photographerList
   
   // 正确写法
   const cardWrap = document.querySelector('.card-wrap')
   cardWrap.innerHTML = photographerList
   

3. 如果是异步接口获取的数据，确认DOM赋值逻辑必须写在接口回调内，或者await请求完成之后再执行，不要把赋值逻辑写到异步流程外面。

注意控制台打印的引用值存在“懒求值”特性：如果你在变量赋值前打印了变量，后续异步给变量赋了正确值，你在控制台查看日志时会看到最终的正确值，产生“打印时变量已经是正确值”的误判，所以必须在DOM赋值的前一行打日志做校验，不能以拼接环节的打印结果作为判断依据。

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