alibaba / alibaba/lowcode-engine

[BUG] antd Descriptions component, Inconsistency between `props` and `children` when using `ArraySetter`

Open
#2,177 7 comments 0 reactions 2 assignees Claimed by @hujiulong View on GitHub
material
Dominant language
TypeScript
Stars
15.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

## **Describe the bug (required)** / **详细描述 bug(必填)**

When settings a component's prop via `ArraySetter`, in schema the component's `props` and `children` can be different which may cause problems.

当通过 `ArraySetter` 设置物料组件的一个属性时,schema 中组件的 `props` 和 `children` 有可能会不一样,这有可能会产生问题。

---

## **To Reproduce (required)** / **如何复现 bug?(必填,非常重要)**

Steps to reproduce the behavior: / 详细复现步骤:

en ver:
1. Open [demo](https://lowcode-engine.cn/demo/demo-basic-antd/index.html) and reset the page
2. add `Descriptions` component
3. add a new item in `items`
4. in the new item's slot, add a `Typography.Text` component
5. set `loop data` of the text component to `this.state.arr` and set the `content` to bind variable `this.item.name`
6. add a new item in `items` and then delete it
7. set `condition` of the text component to `this.state.arr && this.state.arr.length > 0`
8. add a new item in `items`

cn ver:
1. 打开 [demo](https://lowcode-engine.cn/demo/demo-basic-antd/index.html) 并重置页面
2. 添加 `描述列表` 组件
3. 在 `列表项` 中添加一个新元素
4. 在这个新元素中添加 `Typography.Text` 组件
5. 对文本组件设置 `循环数据` 为 `this.state.arr`,并设置 `内容` 为变量绑定 `this.item.name`
6. 在 `列表项` 中添加一个新元素并删除
7. 对文本组件设置 `是否渲染` 为 `this.state.arr && this.state.arr.length > 0`
8. 在 `列表项` 中添加一个新元素

## **Expected behavior (required)** / **预期行为(必填,非常重要)**

The content in `props` and `children` should be the same throughout the whole operation, except `id`.

全操作流程中 `props` 和 `children` 内除 `id` 外其他内容保持一致

---

## **Additional context (optional)** / **更多额外信息(可选)**

- After step 3, step 6 and step 8, `props` and `children` are the same. / 步骤3、步骤6和步骤8之后,`props` 和 `children` 是一致的
- After step 4, `Typography.Text` exists in `children` but doesn't exist in `props`. / 步骤4之后,`children` 有 `Typography.Text` 但是 `props` 里没有
![image](https://github.com/alibaba/lowcode-engine/assets/55199350/7ecdd015-d72d-4853-aa2a-486ce94a68cf)
- After step 7, `props` and `children` are different / 步骤7之后,`props` 和 `children` 是不一致的

---

The inconsistency of `props` and `children` causes a problem in above operation:
1. in step 5 we introduces an error `TypeError: Cannot read properties of undefined (reading 'name')` in **preview page** (this is by design, we can use other errors as example)
2. in step 6, we sync `children` to `props` via `ArraySetter` because we modify `items`
3. then in step 7, even though we set correct `condition`, the error still exists in preview page
4. what we have to do, is modify `items` again (by adding a new item) to sync `children` to `props`

I don't know the reason, but it seems that the errors will disappear when both `props` and `children` are ok. If the user don't check schema, he cannot know that he need to modify `items` again to fix the errors.

这个 `props` 和 `children` 之间的不一致有可能造成一个问题:
1. 步骤5中,在预览页面中我们引入了一个报错 `TypeError: Cannot read properties of undefined (reading 'name')`(故意的,我们也可以用其他错误来举例子)
2. 步骤6中,因为我们修改了 `列表项`,我们通过 `ArraySetter` 将 `children` 同步到了 `props`
3. 然后在步骤7中,尽管我们设置了正确的 `是否渲染`,预览页面中错误仍然存在
4. 我们需要做的,是再次修改 `列表项` 来同步 `children` 到 `props`

我不清楚原因,似乎只有在 `props` 和 `children` 都没问题之后报错才会消失。如果用户不曾检查过 schema,他不可能知道他需要修改一下 `列表项` 来修复报错

The error mentioned above is related to https://github.com/alibaba/lowcode-engine/issues/2172.
上文提到的报错与 https://github.com/alibaba/lowcode-engine/issues/2172 有关

---

## **Environments (please complete the following information) (required):** / **请提供如下信息(必填)**
- AliLowCodeEngine version: v1.1.8-beta
- AliLowCodeEngineExt version: v1.0.6-beta.28
- Browser: chrome Version 114.0.5735.106 (Official Build) (x86_64)

> (this information can be collected via [the manual plugin](https://img.alicdn.com/imgextra/i1/O1CN0115zonY1IsgbkZ2ir7_!!6000000000949-2-tps-3066-1650.png) / 版本信息可[通过低代码用户手册插件收集](https://img.alicdn.com/imgextra/i1/O1CN0115zonY1IsgbkZ2ir7_!!6000000000949-2-tps-3066-1650.png))

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.