修改didMount,在提交页生效,详情页还是旧代码

阿里云服务器

这是一个非常经典的前端缓存或作用域问题。在宜搭(以及大多数低代码/前端框架)中,didMount 生命周期函数只在组件首次挂载到 DOM 树时执行一次。

出现“提交页生效,详情页还是旧代码”的情况,通常由以下 4 个原因 导致。请按顺序排查:

1. 浏览器强缓存 (最常见原因)

浏览器为了加速加载,会缓存 JS 文件。当你修改了代码并发布后,详情页加载的可能仍然是浏览器本地缓存的旧版本 JS 文件,而提交页可能因为 URL 参数不同或强制刷新机制触发了重新请求。

  • ✅ 解决方案

    • 强制刷新:在详情页页面,按 Ctrl + F5 (Windows) 或 Cmd + Shift + R (Mac) 强制清除缓存并重新加载。

    • 无痕模式测试:打开浏览器的“无痕/隐私模式”,访问详情页。如果代码生效了,说明就是浏览器缓存问题。

    • 重新发布应用:确保你在修改代码后,点击右上角的 “发布” 按钮,并且等待发布流程完全结束。有时候只保存未发布,或者发布未完成,线上环境不会更新。

2. 代码未同步到“详情页”配置

宜搭的“表单”通常包含多个页面视图(如:默认页、提交页、详情页、打印页等)。虽然它们共用一套数据模型,但自定义 JS 代码的作用域可能需要确认

  • 现象:你可能在“表单设置” -> “高级设置” -> “表单加载后”修改了代码,但某些旧版本的配置或特定的页面模板可能没有正确引用最新的脚本上下文。

  • ✅ 解决方案

    • 进入表单设计器。

    • 点击右侧面板的 “页面设置” (或齿轮图标)。

    • 找到 “高级设置” -> “表单加载后 (didMount)”

    • 确认代码已更新:再次打开该编辑框,确认里面的代码是你最新修改的版本。

    • 关键点:宜搭的详情页和提交页通常是同一个表单页面的不同状态(通过 urlParams.action 区分)。如果你是在自定义页面中开发的,请检查你是否创建了两个不同的页面(例如 Page_SubmitPage_Detail),如果是这样,你需要分别进入这两个页面的设置中去修改 didMount

3. 逻辑判断条件错误 (代码本身的问题)

如果你的代码中包含根据页面类型执行的逻辑判断,可能是判断条件写错了,导致详情页跳过了新代码的执行。

  • 检查代码逻辑

    export function didMount() {
      // 获取当前动作:CREATE(提交), EDIT(编辑), READ(详情)
      const action = this.utils.getUrlParam('action'); 
      
      console.log('当前页面动作:', action); // <--- 第一步:加这个日志,看控制台输出什么
    
      // ❌ 错误示例:可能你只写了 CREATE 的逻辑
      if (action === 'CREATE') {
         // 你的新代码
         this.$('field_1').setValue('New Value');
      }
      
      // ✅ 修正:确保详情页 (READ) 也包含在内,或者不限制 action
      if (action === 'CREATE' || action === 'READ') {
         // 你的新代码
         this.$('field_1').setValue('New Value');
      }
      
      // 或者完全不判断 action,直接执行(如果业务允许)
      // this.$('field_1').setValue('New Value');
    }
  • 调试方法

    1. 在详情页按 F12 打开开发者工具。

    2. 点击 Console (控制台)

    3. 查看是否有 console.log 输出。

    4. 如果没有输出,说明 didMount 根本没执行(回到第 1 点查缓存或发布状态)。

    5. 如果有输出但值不对,说明是 if 判断逻辑把详情页过滤掉了。

4. 组件 ID 或字段变更

如果你在修改代码的同时,也修改了表单中的字段(例如删除了某个字段,或改变了组件的唯一标识 ID),旧代码中引用的 this.$('old_field_id') 在详情页可能因为渲染顺序或权限控制(详情页有些字段是只读或隐藏的)而失效。

  • ✅ 解决方案

    • 检查代码中引用的字段 ID (this.$('xxx')) 是否在详情页依然存在且可见。

    • 详情页有时会延迟渲染某些组件,尝试将代码包裹在 setTimeout 中测试(不推荐作为最终方案,仅用于验证):

      setTimeout(() => {
         // 尝试操作字段
         this.$('field_id').setValue('...');
      }, 500);

🚀 快速排查步骤总结

  1. 第一步(最重要):在详情页按 Ctrl + F5 强制刷新。

  2. 第二步:按 F12 看控制台有没有报错,或者有没有你加的 console.log 日志。

    • 没日志 = 代码没跑(缓存问题 或 发布未生效)。

    • 有日志但没效果 = 逻辑判断 (if action === ...) 过滤了详情页。

  3. 第三步:确认你是否在自定义页面中开发了两个独立的页面?如果是,记得两个都要改。

  4. 第四步:重新进入设计器,确认代码确实保存并发布了最新版本。

通常 90% 的情况都是 浏览器缓存 导致的,强制刷新即可解决。