目录amis页面报错原因解决方案一、patch打补丁二、参照mapping文件重写reload方法自行加上catch三、原型继承再加上catchamis页面报错Unhandled Rejection (Error): [mobx-state-tree] You are trying to read or write to an object that is no longer part of a state tree. (Object type: MappingStore, Path upon death: , Subpath: fetching, Action: .load()). Either detach nodes first, or dont use objects after removing / replacing them in the tree.原因1.amis 报错默认显示在页面上是 RootRenderer 内置的,没有项目级开关把它改成只进控制台(errorCatcher 即便设了,setRuntimeError仍会执行,页面 alert 照样出)。所以像 store.load 这种异步拒绝,最干净的做法就是——在源头 .catch 吃掉(mappingstoreLoadFix.ts),不让它变成未捕获拒绝/触发 RootRenderer。2.多见于type为select和mapping的场景。解决方案在动手之前可以先通过下表对比三种方案的取舍维度patch 打补丁重写 reload 方法原型继承加 catch侵入性直接修改 amis 源码侵入性强不修改源码重写组件原型方法侵入性中等不修改源码只在原方法上包装一层侵入性较低维护成本较高amis 升级后需要重新生成和维护 patch中等需要跟随 amis 的 reload 逻辑同步调整较低不影响 reload 业务逻辑无需复制实现适用场景需要修复库内部深层逻辑且能接受锁定版本需要完全掌控 reload 行为或原有逻辑较简单只想补充错误兜底保留原有 reload 行为升级影响升级 amis 时 patch 可能冲突或失效reload 签名、逻辑变化时需要同步修改用(...args)透传签名变化基本不受影响综合来看如果只是要解决MappingStore.load未捕获拒绝的问题优先推荐「原型继承加 catch」方案只有需要改动库内部实现细节时才考虑 patch 打补丁。一、patch打补丁package.jsonpnpm: { overrides: { webworkify-webpack: ^2.1.5, rollup: 4.46.0 }, patchedDependencies: { amis6.13.0: patches/amis6.13.0.patch } }patches/amis6.13.0.patchdiff --git a/esm/renderers/Mapping.js b/esm/renderers/Mapping.js index 4fea3ec4f4fc82dd90e42f9602ee6da24c19231b..5f78d5d1030e5d95c72e16fab4d55da5928503ae 100644 --- a/esm/renderers/Mapping.js b/esm/renderers/Mapping.js -8,7 8,7 import { __generator, __assign, __extends, __decorate } from tslib; import React from react; import { StoreNode, normalizeApiResponseData, isObject, guid, isPureVariable, resolveVariableAndFilter, isApiOutdated, isEffectiveApi, normalizeApi, createObject, getPropValue, Renderer } from amis-core; import { withStore } from amis-ui; -import { types, flow } from mobx-state-tree; import { types, flow, isAlive } from mobx-state-tree; var _a; var Store StoreNode.named(MappingStore) -30,14 30,16 var Store StoreNode.named(MappingStore) case 1: ret _a.sent(); if (ret.ok) { data_1 normalizeApiResponseData(ret.data); self.setMap(Array.isArray(data_1.options) ? data_1.options : Array.isArray(data_1.items) ? data_1.items : Array.isArray(data_1.records) ? data_1.records : data_1); if (isAlive(self)) { data_1 normalizeApiResponseData(ret.data); self.setMap(Array.isArray(data_1.options) ? data_1.options : Array.isArray(data_1.items) ? data_1.items : Array.isArray(data_1.records) ? data_1.records : data_1); } } else { throw new Error(ret.msg || fetch error); -45,10 47,14 var Store StoreNode.named(MappingStore) return [3 /break/, 4]; case 2: e_1 _a.sent(); self.errorMsg e_1.message; if (isAlive(self)) { self.errorMsg e_1.message; } return [3 /*break*/, 4]; case 3: self.fetching false; if (isAlive(self)) { self.fetching false; } return [7 /*endfinally*/]; case 4: return [2 /*return*/]; } diff --git a/lib/renderers/Mapping.js b/lib/renderers/Mapping.js index 5329a9ed82d2f3985e53b92c32c193dcd144c86b..be1358311f53bf5c2b9f0ff2ea8446ce850390d9 100644 --- a/lib/renderers/Mapping.js b/lib/renderers/Mapping.js -42,18 42,24 var Store amisCore.StoreNode.named(MappingStore).props({ case 1: ret _a.sent(); if (ret.ok) { data_1 amisCore.normalizeApiResponseData(ret.data); self.setMap(Array.isArray(data_1.options) ? data_1.options : Array.isArray(data_1.items) ? data_1.items : Array.isArray(data_1.records) ? data_1.records : data_1); if (mobxStateTree.isAlive(self)) { data_1 amisCore.normalizeApiResponseData(ret.data); self.setMap(Array.isArray(data_1.options) ? data_1.options : Array.isArray(data_1.items) ? data_1.items : Array.isArray(data_1.records) ? data_1.records : data_1); } } else { throw new Error(ret.msg || fetch error); } return [3 /*break*/, 4]; case 2: e_1 _a.sent(); self.errorMsg e_1.message; if (mobxStateTree.isAlive(self)) { self.errorMsg e_1.message; } return [3 /*break*/, 4]; case 3: self.fetching false; if (mobxStateTree.isAlive(self)) { self.fetching false; } return [7 /*endfinally*/]; case 4: return [2 /*return*/];删除pnpm-lock.yamlrm -rf pnpm-lock.yaml删除node_modulesrm -rf node_modules重新下载pnpm install重新运行npm run dev二、参照mapping文件重写reload方法自行加上catchmappingstoreLoadFix.js// amis 6.13 已知问题:Mapping 渲染器的 MappingStore.load 是 MST flow, // 组件 unmount 时 amis-ui 的 withStore 会 destroy(store),但 in-flight 的 // load 不会取消,flow 的 finally { self.fetching false } 会写入已销毁的 // store,抛 [mobx-state-tree] You are trying to read or write to an object // that is no longer part of a state tree 未捕获拒绝。 // main.tsx 里的 unhandledrejection preventDefault 拦不住它:dev 环境 umi 的 // webpackHotDevClient 自己注册了 unhandledrejection 监听且不看 defaultPrevented, // 照样弹 Unhandled Rejection 红色弹层。所以必须让 rejection 根本不发生。 // // 根因:amis/esm/renderers/Mapping.js 里 reload() 调用 store.load(...) 没有 catch。 // 修复(不打 patch、不改 node_modules):withStore HOC 会把被包装的内部组件挂到 // 包装类的 ComposedComponent 静态属性上(见 amis-ui/esm/components/WithStore.js), // 沿原型链找到 reload,替换为逻辑完全一致的版本,唯一差异是给 store.load // 返回的 promise 补 .catch,吃掉 store 已销毁后的 MST 写入异常。 // // 必须在 amis.render() 之前执行(本模块由 customRenderers.ts 引入,renderer.tsx // 保证其在 render 前加载);对之后创建的所有 mapping 组件实例生效。 import { isPureVariable, resolveVariableAndFilter, isEffectiveApi, normalizeApi } from amis; // amis 入口不导出 MappingField,直接从子路径引。amis 的 package.json exports 里 // ./lib/* 的 import 条件映射到 ./esm/*.js,所以这里引 lib 路径实际拿到的 // 是 esm/renderers/Mapping.js,与 amis 内部引用是同一模块实例(vite/rollup 按解析路径去重)。 // ts-ignore amis 没有为子路径模块提供类型声明 import { MappingField } from amis/lib/renderers/Mapping; function patchMappingReload() { const Inner (MappingField as any)?.ComposedComponent; if (!Inner) return; // mobx-react 的 observer() 可能包一层,沿原型链找真正定义 reload 的原型 let proto Inner.prototype; while (proto !Object.prototype.hasOwnProperty.call(proto, reload)) { proto Object.getPrototypeOf(proto); } if (!proto || proto.__mappingLoadPatched) return; proto.__mappingLoadPatched true; // 与 amis 6.13 renderers/Mapping.js 中 reload 的逻辑一致, // 仅给 store.load 的 promise 补 catch proto.reload function(this: any) { const { source, data, env, store } this.props; if (isPureVariable(source)) { store.setMap(resolveVariableAndFilter(source, data, | raw)); } else if (isEffectiveApi(source, data)) { const api normalizeApi(source, get); api.cache api.cache ?? 30 * 1000; try { store.load(env, api, data).catch((err: any) { console.log(err, errstore.load); }); } catch (err) { console.log(err, errtry-catch); } } }; } patchMappingReload();三、原型继承再加上catchmappingstoreLoadFix.js// amis 6.13 已知问题:Mapping 渲染器的 MappingStore.load 是 MST flow, // 组件 unmount 时 amis-ui 的 withStore 会 destroy(store),但 in-flight 的 // load 不会取消,flow 的 finally { self.fetching false } 会写入已销毁的 // store,抛 [mobx-state-tree] You are trying to read or write to an object // that is no longer part of a state tree 未捕获拒绝。 // main.tsx 里的 unhandledrejection preventDefault 拦不住它:dev 环境 umi 的 // webpackHotDevClient 自己注册了 unhandledrejection 监听且不看 defaultPrevented, // 照样弹 Unhandled Rejection 红色弹层。所以必须让 rejection 根本不发生。 // // 修复思路(不打 patch、不改 node_modules): // 1. 沿原型链拿到组件真正的 reload 原型方法,不重写 reload 的业务逻辑, // 而是用包装函数包住原 reload 并原样转发入参(apply this, args), // 所以 amis 升级后 reload 的签名/逻辑怎么变都不影响本文件。 // 2. 给 store.load 包一层 catch:用 (...args) 透传所有入参,不硬编码 // store.load(env, api, data) 这种固定写法——load 的入参个数/顺序变了 // 本文件也照常工作。只把异常打到 console,不抛到页面。 // // 必须在 amis.render() 之前执行(本模块由 customRenderers.ts 引入,renderer.tsx // 保证其在 render 前加载);对之后创建的所有 mapping 组件实例生效。 // ts-ignore amis 没有为子路径模块提供类型声明 import { MappingField } from amis/lib/renderers/Mapping; // 给 store.load 包装 catch:用 ...args 透传,不依赖 load 的具体签名。 // load 是 MST flow,返回 promise;这里只在 promise 上补 catch, // 吃掉 store 销毁后 flow 写回时报的异常,其余行为原样保留。 function wrapStoreLoad(store: any) { if (!store || store.__mappingLoadPatched) return; store.__mappingLoadPatched true; const originalLoad store.load.bind(store); store.load function(...args: any[]) { return originalLoad(...args).catch((err: any) { console.warn([amis Mapping] store.load rejected:, (err err.message) || err); }); }; } function patchMappingReload() { const Inner (MappingField as any)?.ComposedComponent; if (!Inner) return; // mobx-react 的 observer() 可能包一层,沿原型链找真正定义 reload 的原型 let proto Inner.prototype; while (proto !Object.prototype.hasOwnProperty.call(proto, reload)) { proto Object.getPrototypeOf(proto); } if (!proto || proto.__mappingReloadPatched) return; proto.__mappingReloadPatched true; // 不重写 reload 逻辑:包一层,先把当前组件的 store.load 补上 catch, // 再原样调用原 reload(签名、逻辑都跟着插件走,不硬编码)。 const originalReload proto.reload; proto.reload function(this: any, ...args: any[]) { const store this.props this.props.store; wrapStoreLoad(store); return originalReload.apply(this, args); }; } patchMappingReload();优点1. 用 (...args) 透传 store.load 的所有入参插件升级改签名也不受影响。2. 不重写 reload 业务逻辑只包一层转发 originalReload.apply(this, args)3. .catch 只把错误打到 console不抛到页面。注意vite.config.js的配置加上optimizeDeps: { include: [ react, react-dom, react-dom/client, react/jsx-runtime, react/jsx-dev-runtime, // src/amis/mappingstoreLoadFix.ts 深路径引用了 amis/lib/renderers/Mapping。 // 必须在这里显式声明,让它和 amis 在首次预构建的同一轮里被打包: // 1) 避免 dev 运行中发现新依赖触发重新预构建,旧 chunk 地址 504(Outdated // Optimize Dep),而本项目 hmr:false 收不到 full-reload,页面直接白屏; // 2) 同一轮多入口预构建会做代码分割,renderers/Mapping 模块被提到共享 chunk, // 保证 mappingstoreLoadFix拿到的 MappingField 与 amis 内部注册的是同一模块实例。 amis, amis/lib/renderers/Mapping, ], },在入口页面加上import { Renderer } from amis; // amis mapping 渲染器 MappingStore 未捕获拒绝的运行时修复,须在 render 前执行 import ./mappingstoreLoadFix;