diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
index 3c993a2cb..1ca20b1b5 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -59,11 +59,16 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
         _createContext() {
           const self = this;
 
+          // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+          self._latestState = self.state;
+
           const context = {
             get state() {
-              return self.state;
+              // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+              return self._latestState;
             },
             setState(newState) {
+              self._latestState = { ...self._latestState, ...newState };
               self.setState(newState);
             },
             get dataSourceMap() {
@@ -87,12 +92,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             get constants() {
               return __$$constants;
             },
-            get i18n() {
-              return self._i18n;
-            },
-            getLocale() {
-              return __$$i18n.getLocale();
-            },
+            i18n: __$$i18n.i18n,
+            i18nFormat: __$$i18n.i18nFormat,
+            getLocale: __$$i18n.getLocale,
             setLocale(locale) {
               __$$i18n.setLocale(locale);
               self.forceUpdate();
@@ -106,34 +108,6 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
     });
 
-    next.chunks.push({
-      type: ChunkType.STRING,
-      fileType: cfg.fileType,
-      name: CLASS_DEFINE_CHUNK_NAME.InsVar,
-      content: `
-        _i18n = this._createI18nDelegate();
-      `,
-      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
-    });
-
-    next.chunks.push({
-      type: ChunkType.STRING,
-      fileType: cfg.fileType,
-      name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
-      content: `
-        _createI18nDelegate() {
-          return new Proxy(
-            {},
-            {
-              get(target, prop) {
-                return __$$i18n.i18n(prop);
-              },
-            },
-          );
-        }
-      `,
-      linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
-    });
     return next;
   };
   return plugin;
diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index 497282e39..e7fad7c27 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -126,7 +126,11 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       type: ChunkType.STRING,
       fileType: cfg.fileType,
       name: RAX_CHUNK_NAME.ClassRenderPre,
-      content: `const __$$context = this._context;`,
+      // TODO: setState, dataSourceMap, reloadDataSource, utils, i18n, i18nFormat, getLocale, setLocale 这些在 Rax 的编译模式下不能在视图中直接访问，需要转化成 this.xxx
+      content: `
+        const __$$context = this._context;
+        const { state, setState, dataSourceMap, reloadDataSource, utils, constants, i18n, i18nFormat, getLocale, setLocale } = __$$context;
+      `,
       linkAfter: [RAX_CHUNK_NAME.ClassRenderBegin],
     });
 
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index 63a113d32..c47412f0e 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -35,6 +35,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       dependencies: {
         '@ali/lowcode-datasource-engine': '^0.1.0',
         'universal-env': '^3.2.0',
+        'intl-messageformat': '^9.3.6',
         rax: '^1.1.0',
         'rax-app': '^2.0.0',
         'rax-document': '^0.1.0',
diff --git a/packages/code-generator/src/plugins/project/i18n.ts b/packages/code-generator/src/plugins/project/i18n.ts
index c5dc0911d..df9a497f8 100644
--- a/packages/code-generator/src/plugins/project/i18n.ts
+++ b/packages/code-generator/src/plugins/project/i18n.ts
@@ -24,6 +24,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       fileType: FileType.JS,
       name: COMMON_CHUNK_NAME.FileMainContent,
       content: `
+        import IntlMessageFormat from 'intl-messageformat';
+
         const i18nConfig = ${i18nStr};
 
         let locale = 'en-US';
@@ -34,7 +36,23 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
           locale = target;
         };
 
-        const i18n = key => i18nConfig && i18nConfig[locale] && i18nConfig[locale][key] || '';
+        const i18nFormat = ({ id, defaultMessage }, variables) => {
+          const msg = i18nConfig && i18nConfig[locale] && i18nConfig[locale][id] || defaultMessage;
+          if (msg == null) {
+            console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+            return \`\${id}\`;
+          }
+
+          if (!variables || !variables.length) {
+            return msg;
+          }
+
+          return new IntlMessageFormat(msg, locale).format(variables);
+        }
+
+        const i18n = id => {
+          return i18nFormat({ id });
+        };
       `,
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
@@ -54,6 +72,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
           getLocale,
           setLocale,
           i18n,
+          i18nFormat,
         };
       `,
       linkAfter: [
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
index a42398577..0d4d71bb6 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index e3e89c9b0..f7f5f00c2 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -24,8 +24,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -39,6 +37,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <Page>
@@ -50,11 +60,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -78,12 +93,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -94,17 +106,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
index 70f2530d9..0b4537b56 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index f1dcacb95..66b6ce9a8 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -47,8 +47,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
     runtimeConfig: true,
@@ -74,6 +72,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -147,11 +157,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -175,12 +190,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -191,17 +203,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index 9f7778e7f..a9f5813cd 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -348,10 +348,9 @@
         main: '/clone',
       },
     },
-    // 支持 TNPM
     {
       name: 'Toast',
-      type: 'tnpm',
+      type: 'npm',
       content: {
         package: 'universal-toast',
         version: '^1.2.0',
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
index ab52a96fc..d9842a107 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
index c3f22edd7..03a389ab0 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
@@ -30,8 +30,6 @@ class Detail$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class Detail$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -61,11 +71,16 @@ class Detail$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -89,12 +104,9 @@ class Detail$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -105,17 +117,6 @@ class Detail$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
index dbd0e81ad..8412a98f6 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
@@ -30,8 +30,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -61,11 +71,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -89,12 +104,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -105,17 +117,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
index c4e62dd2d..17a49c62f 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
@@ -30,8 +30,6 @@ class List$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class List$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -64,11 +74,16 @@ class List$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -92,12 +107,9 @@ class List$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -108,17 +120,6 @@ class List$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
index c8b7cf47b..1510f3c4a 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
index 0a93e8574..e5463339e 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
@@ -30,8 +30,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -58,11 +68,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -86,12 +101,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -102,17 +114,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
index a42398577..0d4d71bb6 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ali/lowcode-datasource-engine": "^0.1.0",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
index 33f66ab5a..c3e7c955d 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {
   'zh-CN': {
     'hello-world': '你好，世界！',
@@ -15,6 +17,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
index 40444b2f2..8a3656bfc 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
@@ -24,8 +24,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -39,6 +37,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <Page>
@@ -56,11 +66,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -84,12 +99,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -100,17 +112,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/datasource-engine/src/core/DataSourceEngine.ts b/packages/datasource-engine/src/core/DataSourceEngine.ts
index 30052ee6c..1d15aeee1 100644
--- a/packages/datasource-engine/src/core/DataSourceEngine.ts
+++ b/packages/datasource-engine/src/core/DataSourceEngine.ts
@@ -17,8 +17,7 @@ export class DataSourceEngine implements IDataSourceEngine {
   ) {
     _dataSourceConfig.list?.forEach((ds) => {
       // 确保数据源都有处理器
-      const requestHandler =
-        ds.requestHandler || _options?.requestHandlersMap?.[ds.type];
+      const requestHandler = ds.requestHandler || _options?.requestHandlersMap?.[ds.type];
       if (!requestHandler) {
         throw new Error(`No request handler for "${ds.type}" data source`);
       }
@@ -51,12 +50,8 @@ export class DataSourceEngine implements IDataSourceEngine {
         }
       }
 
-      await sleep(0); // TODO: 如何优雅地解决 setState 的异步问题？
-
       // 然后是所有其他的
-      const remainDataSourceConfigList = allDataSourceConfigList.filter(
-        (x) => x.type !== 'urlParams',
-      );
+      const remainDataSourceConfigList = allDataSourceConfigList.filter((x) => x.type !== 'urlParams');
 
       // 先发起异步的
       const asyncLoadings: Array<Promise<unknown>> = [];
@@ -65,9 +60,7 @@ export class DataSourceEngine implements IDataSourceEngine {
           const options = getValue(ds.options);
           if (options && !options.isSync) {
             this._dataSourceMap[ds.id].setOptions(options);
-            asyncLoadings.push(
-              this._dataSourceMap[ds.id].load(options?.params).catch(() => {}),
-            );
+            asyncLoadings.push(this._dataSourceMap[ds.id].load(options?.params).catch(() => {}));
           }
         }
       }
@@ -106,18 +99,12 @@ export class DataSourceEngine implements IDataSourceEngine {
   }
 }
 
-export const create: IDataSourceEngineFactory['create'] = (
-  dataSourceConfig,
-  runtimeContext,
-  options,
-) => {
+export const create: IDataSourceEngineFactory['create'] = (dataSourceConfig, runtimeContext, options) => {
   return new DataSourceEngine(dataSourceConfig, runtimeContext, options);
 };
 
 function getValue<T>(valueOrValueGetter: T | (() => T)): T;
-function getValue<T extends boolean>(
-  valueOrValueGetter: T | (() => T),
-): T | undefined {
+function getValue<T extends boolean>(valueOrValueGetter: T | (() => T)): T | undefined {
   if (typeof valueOrValueGetter === 'function') {
     try {
       return valueOrValueGetter();
diff --git a/packages/datasource-engine/src/core/RuntimeDataSource.ts b/packages/datasource-engine/src/core/RuntimeDataSource.ts
index e9ea43e87..8f53b45f7 100644
--- a/packages/datasource-engine/src/core/RuntimeDataSource.ts
+++ b/packages/datasource-engine/src/core/RuntimeDataSource.ts
@@ -1,9 +1,5 @@
-import {
-  DataSourceOptions,
-  IRuntimeDataSource,
-  RequestHandler,
-  RuntimeDataSourceStatus,
-} from '../types';
+import { DataSourceOptions, IRuntimeDataSource, RequestHandler, RuntimeDataSourceStatus } from '../types';
+import { DataSourceResponse } from '../types/DataSourceResponse';
 
 export class RuntimeDataSource<
   TParams extends Record<string, unknown> = Record<string, unknown>,
@@ -19,13 +15,10 @@ export class RuntimeDataSource<
     private _id: string,
     private _type: string,
     private _initialOptions: DataSourceOptions<TParams>,
-    private _requestHandler: RequestHandler<
-      DataSourceOptions<TParams>,
-      TRequestResult
-    >,
+    private _requestHandler: RequestHandler<DataSourceOptions<TParams>, DataSourceResponse<TRequestResult>>,
     private _dataHandler:
       | ((
-          data: TRequestResult | undefined,
+          data: DataSourceResponse<TRequestResult> | undefined,
           error: unknown | undefined,
         ) => TResultData | Promise<TResultData>)
       | undefined,
@@ -79,11 +72,11 @@ export class RuntimeDataSource<
 
   private async _request(options: DataSourceOptions<TParams>) {
     try {
-      const reqResult = await this._requestHandler(options);
+      const response = await this._requestHandler(options);
 
       const data = this._dataHandler
-        ? await this._dataHandler(reqResult, undefined)
-        : ((reqResult as unknown) as TResultData);
+        ? await this._dataHandler(response, undefined)
+        : ((response.data as unknown) as TResultData);
 
       return data;
     } catch (err) {
diff --git a/packages/datasource-engine/src/handlers/fetch.ts b/packages/datasource-engine/src/handlers/fetch.ts
index 3db926c9f..d0f6d344b 100644
--- a/packages/datasource-engine/src/handlers/fetch.ts
+++ b/packages/datasource-engine/src/handlers/fetch.ts
@@ -18,7 +18,7 @@ const fetchHandler: RequestHandler = async ({
 
   const res = await request(reqOptions as RequestOptions);
 
-  return res.data;
+  return res;
 };
 
 export default fetchHandler;
diff --git a/packages/datasource-engine/src/handlers/mtop.ts b/packages/datasource-engine/src/handlers/mtop.ts
index 88ab8e01b..4894b9ad9 100644
--- a/packages/datasource-engine/src/handlers/mtop.ts
+++ b/packages/datasource-engine/src/handlers/mtop.ts
@@ -1,15 +1,18 @@
 import mtop from '@ali/universal-mtop';
 import { RequestHandler } from '../types';
 
-const mtopHandler: RequestHandler = async ({ data, params, ...options }) => {
+const mtopHandler: RequestHandler = async (options) => {
+  const { api, uri, data, params, type, method, ...otherOptions } = options;
   const reqOptions = {
-    ...options,
+    ...otherOptions,
+    api: api || uri,
     data: data || params,
+    type: type || method,
   };
 
   const res = await mtop(reqOptions);
 
-  return res.data;
+  return res;
 };
 
 export default mtopHandler;
diff --git a/packages/datasource-engine/src/handlers/url-params.ts b/packages/datasource-engine/src/handlers/url-params.ts
index d7fbfba3d..c5a37f4bd 100644
--- a/packages/datasource-engine/src/handlers/url-params.ts
+++ b/packages/datasource-engine/src/handlers/url-params.ts
@@ -1,14 +1,12 @@
 import qs from 'query-string';
 import { RequestHandler } from '../types';
 
-export default function urlParamsHandler({
-  search,
-}: {
-  search: string | Record<string, unknown>;
-}): RequestHandler {
+export default function urlParamsHandler({ search }: { search: string | Record<string, unknown> }): RequestHandler {
   const urlParams = typeof search === 'string' ? qs.parse(search) : search;
 
   return async () => {
-    return urlParams;
+    return {
+      data: urlParams,
+    };
   };
 }
diff --git a/packages/datasource-engine/src/types/DataSourceResponse.ts b/packages/datasource-engine/src/types/DataSourceResponse.ts
new file mode 100644
index 000000000..36bd45fff
--- /dev/null
+++ b/packages/datasource-engine/src/types/DataSourceResponse.ts
@@ -0,0 +1,3 @@
+export type DataSourceResponse<TData = unknown> = {
+  data: TData;
+};
diff --git a/packages/datasource-engine/src/types/RequestHandler.ts b/packages/datasource-engine/src/types/RequestHandler.ts
index aa9708585..c8a96f099 100644
--- a/packages/datasource-engine/src/types/RequestHandler.ts
+++ b/packages/datasource-engine/src/types/RequestHandler.ts
@@ -1,6 +1,7 @@
 import { DataSourceOptions } from './DataSourceOptions';
+import { DataSourceResponse } from './DataSourceResponse';
 
 export type RequestHandler<
   TOptions extends DataSourceOptions = DataSourceOptions,
-  TResult = unknown
+  TResult extends DataSourceResponse = DataSourceResponse
 > = (options: TOptions) => Promise<TResult>;