关于 lowcode-engine 跟 formily 表单结合出现的一个问题

[twinkle77]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

伪代码结构如下：

export default () => {
  return (
    <Page>
      <FormilyComp />
      <Button></Button>
    </Page>
  );
};

• Page 组件为 lowcode-engine 顶层 class 组件
• FormilyComp 组件为用户拖拽进画布的 formily 容器
• FormilyComp 的 schema 依赖 Page 组件的 state，如 enum: {{ $page.state.list }}
• 点击按钮调用 this.setState({ list: [{label: 1, value: 1}, { label: 2, value: 2 }]})
• react 整颗树会重渲染，但无法触发 formilyForm 的 select 组件更新
• 查看 formily 源码，原因是 formily 对 field 实例进行复用

尝试通过 clearFormGraph 去解决

  useEffect(() => {
     normalForm.clearFormGraph()
  }, [$page.state])

但这种方式会导致 field 重新实例化，又重新 mount 了，如果 field 实例 mount 的时候，有调用 $page.setState 场景的话，会触发无限循环（在线源码链接可复现）

What is expected?

1. 解决 filed 的 enum 更新的问题（enum 依赖 $page.state.xxx）
2. 不会触发无限渲染

What is actually happening?

现在出现的情况是：

1. Page 组件调用了 setState，但 formily select 组件不会更新

Package

@formily/core@2.1.9

---

在线链接： https://codesandbox.io/s/proud-wood-j71knz?file=/App.tsx

[twinkle77]

lowcode-engine 复现步骤:

1. 打开 https://lowcode-engine.cn/demo/antd-pro-with-formily.html
2. cv 该评论最底下的 dsl 进 schema 配置面板

3. 保存 schema

4. 可以看到绑定方式如图

5. 点击右上角的 “预览” 6. 可以看到渲染结果，不是更新后的 this.state.list

{
  "componentName": "Page",
  "id": "node_dockcviv8fo1",
  "props": {
    "ref": "outerView",
    "style": {
      "height": "100%"
    }
  },
  "fileName": "/",
  "dataSource": {
    "list": [
      {
        "type": "fetch",
        "isInit": true,
        "options": {
          "params": {},
          "method": "GET",
          "isCors": true,
          "timeout": 5000,
          "headers": {},
          "uri": "mock/info.json"
        },
        "id": "info"
      }
    ]
  },
  "state": {
    "list": {
      "type": "JSExpression",
      "value": "[{\n  label: '1',\n  value: '1'\n}]"
    }
  },
  "css": "body {\n  font-size: 12px;\n}\n\n.button {\n  width: 100px;\n  color: #ff00ff\n}",
  "lifeCycles": {
    "componentDidMount": {
      "type": "JSFunction",
      "value": "function componentDidMount() {\n  console.log('did mount');\n  setTimeout(() => {\n    this.setState({\n      list: [{\n        label: '1',\n        value: '1'\n      }, {\n        label: '2',\n        value: '2'\n      }]\n    }, () => {\n      console.log('更新 state.list 成功', this.state);\n    });\n  }, 2000);\n}"
    }
  },
  "methods": {},
  "originCode": "class LowcodeComponent extends Component {\n  state = {\n    list: [\n      { label: '1', value: '1' }\n    ]\n  }\n\n  componentDidMount() {\n    console.log('did mount');\n    setTimeout(() => {\n      this.setState({\n        list: [\n          { label: '1', value: '1' },\n          { label: '2', value: '2' }\n        ]\n      }, () => {\n        console.log('更新 state.list 成功', this.state)\n      })\n    }, 2000)\n  }\n}",
  "title": "",
  "isLocked": false,
  "condition": true,
  "conditionGroup": "",
  "children": [
    {
      "componentName": "FormilyForm",
      "id": "node_ocl56ddwtf1",
      "props": {
        "componentProps": {
          "layout": "vertical"
        },
        "__component_name": "FormilyForm",
        "ref": "formily_eie71x25h1"
      },
      "title": "FormilyForm",
      "isLocked": false,
      "condition": true,
      "conditionGroup": "",
      "children": [
        {
          "componentName": "FormilySelect",
          "id": "node_ocl56ddwtf5",
          "props": {
            "__component_name": "FormilySelect",
            "fieldProps": {
              "name": "habit",
              "title": "Select",
              "x-validator": [],
              "enum": "{{$this.state.list}}"
            },
            "componentProps": {
              "x-component-props": {}
            },
            "decoratorProps": {
              "x-decorator-props": {}
            }
          },
          "title": "",
          "isLocked": false,
          "condition": true,
          "conditionGroup": ""
        }
      ]
    }
  ]
}

[janryWang]

试试createForm({designable:true})

[twinkle77]

啊哈，试了，确认不行
designable 模式完全跑不动
@janryWang

[twinkle77]

主要是运行时的问题，非编辑时（画布） 😂

[janryWang]

运行时直接就是正常formily写法，具体看文档