目录
二、参照mapping文件重写reload方法，自行加上catch
amis页面报错：
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 don't 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.json
"pnpm": {
"overrides": {
"webworkify-webpack": "^2.1.5",
"rollup": "4.46.0"
},
"patchedDependencies": {
"amis@6.13.0": "patches/amis@6.13.0.patch"
}
}patches/amis@6.13.0.patch
diff --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.yaml
rm -rf pnpm-lock.yaml删除node_modules
rm -rf node_modules重新下载
pnpm install重新运行
npm run dev二、参照mapping文件重写reload方法，自行加上catch
mappingstoreLoadFix.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, '=====err===store.load=========');
});
} catch (err) {
console.log(err, '=====err===try-catch========');
}
}
};
}
patchMappingReload();
三、原型继承，再加上catch
mappingstoreLoadFix.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';
扫一扫
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
