render 和 Editor 同时出现在一个组件内，会导致 render 设置的 env 失效

github-at-everain commented 1 year ago

描述问题：

截图或视频：

Snipaste_2023-05-23_17-05-33

如何复现（请务必完整填写下面内容）：

你是如何使用 amis 的？ npm / react 模式
amis 版本是什么？请先在最新 beta 版本测试问题是否存在 "amis": "^3.0.0", "amis-editor": "^5.3.0", "amis-editor-core": "^5.3.0", "amis-formula": "^3.0.0", "amis-ui": "^3.0.0",

粘贴有问题的完整 amis schema 代码：


{
"type": "page",
"title": "",
"body": [
{
  "type": "service",
  "body": [
    {
      "type": "json",
      "id": "u:773d46f006f0",
      "source": "${pageOptions}",
      "levelExpand": 0
    },
    {
      "type": "json",
      "id": "u:0df46e528cb2",
      "source": "${serviceOptions}",
      "levelExpand": 0
    },
    {
      "type": "crud",
      "id": "u:0db5378281b7",
      "api": {
        "url": "https://jsonplaceholder.typicode.com/posts",
        "method": "get"
      },
      "syncLocation": false,
      "columns": [
        {
          "name": "id",
          "label": "ID",
          "type": "text",
          "id": "u:1b928993187a"
        },
        {
          "name": "title",
          "label": "标题",
          "type": "text",
          "id": "u:b4dc2a9572f8"
        },
        {
          "type": "text",
          "label": "内容",
          "id": "u:b94249e9ae89",
          "name": "body"
        },
        {
          "type": "text",
          "label": "用户ID",
          "id": "u:f220bb9a01f5",
          "name": "userId"
        },
        {
          "type": "operation",
          "label": "查看日志",
          "id": "u:3bf42bbcf684"
        }
      ],
      "bulkActions": [
        {
          "type": "button",
          "level": "danger",
          "label": "批量删除",
          "actionType": "ajax",
          "confirmText": "确定要删除？",
          "api": "/xxx/batch-delete",
          "id": "u:cfebab548eae"
        }
      ],
      "itemActions": [
      ],
      "features": [
        "create",
        "bulkDelete",
        "view",
        "update",
        "filter"
      ],
      "filterColumnCount": 5,
      "headerToolbar": [
        {
          "label": "新增",
          "type": "button",
          "actionType": "dialog",
          "level": "primary",
          "dialog": {
            "title": "新增",
            "body": {
              "type": "form",
              "api": {
                "method": "post",
                "url": "https://jsonplaceholder.typicode.com/posts"
              },
              "body": [
                {
                  "type": "input-text",
                  "name": "id",
                  "label": "ID"
                },
                {
                  "type": "input-text",
                  "name": "title",
                  "label": "标题"
                },
                {
                  "type": "input-text",
                  "label": "内容",
                  "name": "body"
                },
                {
                  "type": "input-text",
                  "label": "用户ID",
                  "name": "userId"
                },
                {
                  "type": "input-operation",
                  "label": "查看日志"
                }
              ]
            }
          },
          "id": "u:15b46336fde7"
        },
        "bulkActions"
      ],
      "filter": {
        "body": [
          {
            "type": "select",
            "label": "pageOptions",
            "name": "select",
            "id": "u:0a693b17836a",
            "multiple": false,
            "source": "${pageOptions}",
            "value": ""
          },
          {
            "type": "select",
            "label": "serviceOptions",
            "name": "title",
            "id": "u:eb410f1a5d19",
            "multiple": false,
            "source": "${serviceOptions}",
            "labelField": "title",
            "valueField": "title",
            "value": ""
          },
          {
            "type": "nested-select",
            "label": "page - 级联选择器",
            "name": "nestedSelect",
            "onlyChildren": true,
            "id": "u:3c11c65b081a",
            "searchable": true,
            "onlyLeaf": false,
            "multiple": false,
            "source": "${pageOptions}",
            "clearable": true
          },
          {
            "type": "nested-select",
            "label": "service - 级联选择器",
            "name": "nestedSelect2",
            "onlyChildren": true,
            "id": "u:9bbbb6a4409e",
            "searchable": true,
            "onlyLeaf": false,
            "multiple": false,
            "source": "${serviceOptions}",
            "clearable": true
          }
        ],
        "id": "u:b5130a4095e4",
        "debug": false,
        "submitText": "搜索",
        "name": "tableFilter"
      }
    }
  ],
  "id": "u:d82dac66d77e",
  "messages": {
  },
  "api": {
    "url": "https://jsonplaceholder.typicode.com/posts",
    "method": "get",
    "messages": {
    },
    "requestAdaptor": "",
    "adaptor": "return {\r\n    status: 0,\r\n    msg: '',\r\n    data: {\r\n        serviceOptions: payload\r\n    }\r\n}"
  }
}
],
"id": "u:86b15fac0a7e",
"pullRefresh": {
"disabled": true
},
"asideResizor": false,
"style": {
"boxShadow": " 0px 0px 0px 0px transparent"
},
"data": {
},
"aside": [
],
"initApi": {
"url": "https://jsonplaceholder.typicode.com/posts",
"method": "get",
"requestAdaptor": "",
"adaptor": "return {\r\n  status: 0,\r\n  msg: '',\r\n  data: {\r\n    pageOptions: payload\r\n  }\r\n}",
"messages": {
},
"data": {
}
},
"regions": [
"body"
]
}


5. 操作步骤
将 render 和 editor 封装到同一个组件内了，然后 render 就无法正常调用接口了，editor 正常（一下示例为关键代码）。

import { render as renderAmisSchema } from 'amis' import { Editor as AmisEditor } from 'amis-editor' import { copyToClipboard as copy, createFetcher, isCancel, alert } from './env.ts'

export default function AmisRender({ schema, onSchemaChange, amisProps, amisOptions, amisScopeRef, renderOptions }: AmisRenderProps) { const [innerSchema, setInnerSchema] = useState(JSON.parse(JSON.stringify(schema))) const props = { ...amisProps, scopeRef: (ref: any) => { console.log('amisScopeRef: ', amisScopeRef) amisScopeRef = ref }, } const options = { fetcher: createFetcher(renderOptions), isCancel, copy, ...(amisOptions || {}), theme: 'cxd', }

const [visible, setVisible] = useState(false)

const saveSchema = (value: any) => { if (onSchemaChange) { onSchemaChange(value) } setInnerSchema(value) }

return (

{ renderOptions?.isDevMode && ( <>

setVisible(true)}>编辑

setVisible(false)} > ) } {renderAmisSchema( schema, props, options )}

) }

github-actions[bot] commented 1 year ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

2betop commented 1 year ago

最新 master 已修复此问题

github-at-everain commented 1 year ago

大佬，我这边还遇到一个问题，我用这样的页面结构（page>service>service>crud(filter>select1,select2)），filter 里面的表单组件有时候能拿到 service 获取的数据，有时候拿不到，没有什么规律…这个是什么原因哈？……

github-at-everain commented 1 year ago

最新 master 已修复此问题

拉了代码自行编译了master 分支来使用，问题依旧存在 @2betop

2betop commented 1 year ago

大佬，我这边还遇到一个问题，我用这样的页面结构（page>service>service>crud(filter>select1,select2)），filter 里面的表单组件有时候能拿到 service 获取的数据，有时候拿不到，没有什么规律…这个是什么原因哈？……

就你贴的这个例子，具体是哪个数据拿不到？我验证一下

baidu / amis