Svelte创建字典时出现异常undefined项，求排查方法

• 聚焦use_set_hands元素的逻辑细节
  既然注释该元素后异常消失，优先排查它的关联代码：

  • 检查元素的事件处理、属性绑定中，是否存在往字典对象添加键值的操作，比如误用未初始化的变量作为键名。
  • 确认是否有bind:双向绑定关联到字典，绑定的变量是否存在未定义的场景。

• 对齐REPL与本地环境的差异

  • 核对Svelte版本：REPL使用3.52.0，确认本地项目的Svelte版本是否一致，版本差异可能导致编译行为不同。
  • 检查项目预处理配置（如TypeScript、PostCSS等），是否存在编译时修改代码的逻辑，导致字典对象被意外篡改。

• 添加调试追踪定位操作源

  • 在字典对象的创建或修改环节，通过console.trace()追踪调用栈：

    const dict = { solo: [], duo: [] };
    // 监控字典的键添加操作
    const tracedDict = new Proxy(dict, {
      set(target, prop, value) {
        console.log(`新增键名：${prop}`);
        console.trace();
        target[prop] = value;
        return true;
      }
    });
    

  从输出的调用栈中，就能找到触发undefined键添加的代码位置。

• 检查组件的 reactivity 与生命周期逻辑

  • 排查onMount、beforeUpdate等生命周期钩子中的异步操作，是否存在操作过程中变量变为undefined并被当作键名的情况。
  • 验证$:反应式语句，确认其中的变量是否在某些状态下未定义，进而被添加到字典中。

• 对比编译后的代码差异

  • 查看本地项目编译后的输出代码（通常在build或.svelte-kit目录），找到字典相关的编译结果，和REPL编译后的代码做对比，定位是否有额外的赋值逻辑导致undefined键出现。

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