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

[yifanwww]

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 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 并重置页面
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 里没有
• 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 / 版本信息可通过低代码用户手册插件收集)

[liujuping]

这里的 ths.state.arr 是写错了还是故意设置成这样的？

[yifanwww]

这里的 ths.state.arr 是写错了还是故意设置成这样的？

故意的，实际上设置其他的值也可以，只要 循环数据 是 undefined 或 null

在 https://github.com/alibaba/lowcode-engine/issues/2172 这个问题被修复之前，可以通过这个方式来主动触发一个报错，进而通过这个报错来展示出 props 和 children 不一致时会引发什么样的问题

而我之所以选择这个报错，是因为我尚且不知道有没有其他的主动触发报错的方式

[liujuping]

不是，这里应该是 this.state.arr，而不是 ths，这样导致这个语句的判断出现了问题。

对文本组件设置 是否渲染 为 ths.state.arr && this.state.arr.length > 0

[yifanwww]

噢😯 那确实是我写错了。。已修正

[liujuping]

那再确定一下，这个问题是否还存在。我配置了正确的 this.state.arr && this.state.arr.length 条件语句之后，报错就没有了。

[yifanwww]

问题存在。我想了一下，我们可以换一个简单的方式

en ver:

1. Open demo and reset the page
2. set initial value of state to { someData: { value: 'hello world' } }
3. add Descriptions component and add a new item in items
4. in the new item's slot, add a Typography.Text component
5. bind the content of Typography.Text to variable this.state.someDat.value (typo intended)
6. add a new item in items and then delete it
7. bind content of the text component to variable this.state.someData.value
8. add a new item in items and then delete it

cn ver:

1. 打开 demo 并重置页面
2. 将 state 的初始值设置成 { someData: { value: 'hello world' } }
3. 添加 描述列表 组件并在 列表项 中添加一个新元素
4. 在这个新元素中添加 Typography.Text 组件
5. 将文本组件的 内容 绑定到变量 this.state.someDat.value （故意写错）
6. 在 列表项 中添加一个新元素并删除
7. 将文本组件到 内容 绑定到变量 this.state.someData.value
8. 在 列表项 中添加一个新元素并删除

第5步之后应当会得到 TypeError: Cannot read properties of undefined (reading 'value') 报错，并且第7步无法修复这个报错，第8步之后报错才会消失

[liujuping]

这个问题应该和 Descriptions 组件的配置应该有关系，它在 items 变化的时候，才会同步 items 下的 Slot，可以看到：

1.在第 4 步（在这个新元素中添加 Typography.Text 组件）的时候，大纲树是这样的

2.在第 6 步（在 列表项 中添加一个新元素并删除）的时候，大纲树是这样的

所以相当于这里的 items 添加或者删除的时候才会将改动正确同步。可以在 https://github.com/alibaba/lowcode-materials 看一下相关组件的配置。