baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.4k stars 2.52k forks source link

使用 dialog 给外部表单设置数据时候, 数组设置空数据时会遇到报错 [mobx-state-tree] You are trying to read or write to an object that is no longer part of a state tree. (Object type: 'FormStore', Path upon death: '', Subpath: '', Action: '.setCurrentAction()'). Either detach nodes first, or don't use objects after removing / replacing them in the tree. #11070

Open yanquer opened 1 month ago

yanquer commented 1 month ago

关键 Json

{
            "type": "service",
            "id": "testTableId2",
            "name": "testTableId2",
            "data": {
                "tDItems": [
                    {
                        "name": "bob",
                        "age": 20,
                        "addr": "大中华",
                    },
                    {
                        "name": "bob2",
                        "age": 200,
                        "addr": "大中华2",
                    },
                ],
            },
            "body": [
                {
                    "type": "service",
                    "name": "tablePage2",
                    "body": [
                        {
                            "type": "table",
                            "name": "table_test2",
                            "source": "$tDItems",
                            "affixHeader": false,
                            "syncLocation": false,
                            "columns": [
                                {
                                    "name": "name",
                                    "label": "name",
                                    "type": "text"
                                },
                                {
                                    "name": "age",
                                    "label": "age",
                                    "type": "text"
                                },
                                {
                                    "type": "text",
                                    "label": "addr",
                                    "name": "addr"
                                },
                            ],
                        },
                    ]
                },
                {
                    "type": "button",
                    "label": "Edit",
                    "level": "primary",
                    "onEvent": {
                        "click": {
                            "actions": [
                                {
                                    "actionType": "dialog",
                                    "dialog": {
                                        "type": "dialog",
                                        "body": [
                                            {"type": "input-array", "name": "tDItems", "label": "tDItems",
                                                "items": [
                                                    {"type": "combo", "controls": [
                                                            {"label": "name", "name": "name", "type": "input-text"},
                                                            {"label": "age", "name": "age", "type": "input-text"},
                                                            {"label": "addr", "name": "addr", "type": "input-text"},
                                                        ],
                                                    },
                                                ],
                                            },
                                        ],
                                        "onEvent": {
                                            "confirm": {
                                                "actions": [
                                                    {"actionType": "setValue", "componentName": "testTableId2",
                                                        "args": {"value": {"tDItems": "$tDItems"},},
                                                    },
                                                ],
                                            },
                                        },
                                    }
                                }
                            ]
                        }
                    }
                }
            ]
        }

外部表格渲染的数据会同时显示在 dialog 第一次打开时.

但, 当打开 dialog, 并清空数组, 点击 确认 按钮, 会遇到报错

[mobx-state-tree] You are trying to read or write to an object that is no longer part of a state tree. (Object type: 'FormStore', Path upon death: '', Subpath: '', Action: '.setCurrentAction()'). Either detach nodes first, or don't use objects after removing / replacing them in the tree.

点击确定时候报错

不过外部数据可以正常清空.

yanquer commented 1 month ago

暂时实验后可以通过 form 表单包裹一下解决. 即 dialog 的 body 内容设置为

{"type": "form", "body": [
                                                    {"type": "input-array", "name": "tDItems", "label": "tDItems",
                                                        "items": [
                                                            {"type": "combo", "controls": [
                                                                    {"label": "name", "name": "name", "type": "input-text"},
                                                                    {"label": "age", "name": "age", "type": "input-text"},
                                                                    {"label": "addr", "name": "addr", "type": "input-text"},
                                                                ],
                                                            },
                                                        ],
                                                    },
                                                ]},

就是样式可能需要再额外自行调整一下