alibaba / alibaba/lowcode-engine
循环渲染的key未生效
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 2.7k
- PR merge metrics
- No merged PRs in 30d
Description
## **To Reproduce (required)** / **如何复现 bug?(必填,非常重要)**
Steps to reproduce the behavior: / 详细复现步骤:
1. 对1个容器例如(Row+Column)进行循环渲染,循环数据设置为 state 里面的数组 count 初始值为 [{ key: '1' }],循环 key 设置为 "key"
2. 容器内用Text和Input组件进行渲染,Input组件非受控(没有任何绑定)
3. 创建1个 Add 按钮点击时修改 count数组,push一个 { key: this.state.count.length+1+'' },然后setState
4. 创建1个 Delete 按钮点击时删除 count 数组的第2个元素,通过 splice(1,1),然后setState
5. 点击Add会增加多项,在Input中输入与text相同的数字
6.点击删除后, text与Input中的数字不再匹配
7. 在ProCode react中做同样的测试,删除某项后 text与Input中的内容始终是匹配的
附录:我的测试 module schema
```
{
"componentName": "Page",
"id": "Page1",
"props": {},
"css": "",
"state": {
"count": {
"type": "JSExpression",
"value": "[{\n key: '1'\n}]"
}
},
"title": "",
"hidden": false,
"methods": {
"onClick_Button_Button1": {
"type": "JSFunction",
"value": "function onClick_Button_Button1(event, extParams) {\n this.state.count.push({\n key: \"\" + (this.state.count.length + 1)\n });\n this.setState({\n count: this.state.count\n });\n}",
"source": "function onClick_Button_Button1(event, extParams) {\n this.state.count.push({\n key: \"\" + (this.state.count.length + 1)\n });\n this.setState({\n count: this.state.count\n });\n}"
},
"onChange_Input_Input1": {
"type": "JSFunction",
"value": "function onChange_Input_Input1(event, extParams) {\n console.log(\"Input组件 onChange, \", event.target.value, \"extParams:\", extParams, extParams.index);\n}",
"source": "function onChange_Input_Input1(event, extParams) {\n console.log(\"Input组件 onChange, \", event.target.value, \"extParams:\", extParams, extParams.index);\n}"
},
"onClick_Button_Button2": {
"type": "JSFunction",
"value": "function onClick_Button_Button2(event, extParams) {\n this.state.count.splice(1, 1);\n this.setState({\n count: this.state.count\n });\n}",
"source": "function onClick_Button_Button2(event, extParams) {\n this.state.count.splice(1, 1);\n this.setState({\n count: this.state.count\n });\n}"
}
},
"fileName": "/",
"isLocked": false,
"condition": true,
"dataSource": {
"list": []
},
"lifeCycles": {},
"originCode": "class LowcodeComponent extends Component {\n state = {\n count: [{ key: '1' }]\n };\n onClick_Button_Button1(event, extParams) {\n this.state.count.push({ key: \"\" + (this.state.count.length + 1) });\n this.setState({ count: this.state.count })\n }\n onChange_Input_Input1(event, extParams) {\n console.log(\n \"Input组件 onChange, \",\n event.target.value,\n \"extParams:\",\n extParams,\n extParams.index\n );\n }\n onClick_Button_Button2(event, extParams) {\n this.state.count.splice(1, 1);\n this.setState({ count: this.state.count })\n }\n}\n",
"conditionGroup": "",
"children": [
{
"componentName": "Button",
"id": "Button1",
"props": {
"size": "middle",
"block": false,
"ghost": false,
"shape": "default",
"style": {
"display": "block"
},
"danger": false,
"onClick": {
"type": "JSFunction",
"value": "function(){return this.onClick_Button_Button1.apply(this,Array.prototype.slice.call(arguments).concat([{\n\t\"record\": this.record,\n\t\"index\": this.index, \n}]))}"
},
"__events": {
"eventList": [
{
"name": "onClick",
"disabled": true,
"template": "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}"
}
],
"eventDataList": [
{
"name": "onClick",
"type": "",
"paramStr": "{\n\t\"record\": this.record,\n\t\"index\": this.index, \n}",
"relatedEventName": "onClick_Button_Button1"
}
]
},
"children": "Add",
"disabled": false,
"htmlType": "button",
"__component_name": "Button"
},
"title": "",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": ""
},
{
"componentName": "Button",
"id": "Button2",
"props": {
"size": "middle",
"block": false,
"ghost": false,
"shape": "default",
"style": {
"display": "block"
},
"danger": false,
"onClick": {
"type": "JSFunction",
"value": "function(){return this.onClick_Button_Button2.apply(this,Array.prototype.slice.call(arguments).concat([{\n\t\"record\": this.record,\n\t\"index\": this.index, \n}]))}"
},
"__events": {
"eventList": [
{
"name": "onClick",
"disabled": true,
"template": "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}"
}
],
"eventDataList": [
{
"name": "onClick",
"type": "",
"paramStr": "{\n\t\"record\": this.record,\n\t\"index\": this.index, \n}",
"relatedEventName": "onClick_Button_Button2"
}
]
},
"children": "删除第2个Input",
"disabled": false,
"htmlType": "button",
"__component_name": "Button"
},
"title": "",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": ""
},
{
"componentName": "Row",
"id": "node_oclq6a1m0i1",
"props": {
"align": "top",
"justify": "start",
"wrap": false,
"key": "key",
"ref": "row-c9065c3e",
"_unsafe_MixedSetter____loop____select": "VariableSetter"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"loop": {
"type": "JSExpression",
"value": "this.state.count"
},
"loopArgs": [
null,
null
],
"children": [
{
"componentName": "Col",
"id": "node_oclq6a1m0i2",
"props": {
"span": 12,
"order": 0
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "Typography.Text",
"id": "TypographyText1",
"props": {
"code": false,
"mark": false,
"style": {
"display": "inline"
},
"delete": false,
"strong": false,
"children": {
"type": "JSExpression",
"value": "this.item.key",
"mock": "text"
},
"disabled": false,
"keyboard": false,
"underline": false,
"__component_name": "Typography.Text",
"_unsafe_MixedSetter____loop____select": "VariableSetter",
"ref": "typography.text-dc4cfd7a"
},
"title": "",
"hidden": false,
"isLocked": false,
"loopArgs": [
"",
""
],
"condition": true,
"conditionGroup": ""
},
{
"componentName": "Input",
"id": "Input1",
"props": {
"key": "key",
"__events": {
"eventList": [
{
"name": "onChange",
"disabled": true,
"template": "onChange(event,${extParams}){\n// 输入框内容变化时的回调\nconsole.log('onChange',event);}"
},
{
"name": "onPressEnter",
"disabled": false,
"template": "onPressEnter(event,${extParams}){\n// 按下回车的回调\nconsole.log('onPressEnter',event);}"
},
{
"name": "onFocus",
"disabled": false,
"template": "onFocus(event,${extParams}){\n// 获取焦点回调\nconsole.log('onFocus',event);}"
},
{
"name": "onKeyDown",
"disabled": false,
"template": "onKeyDown(event,${extParams}){\n// 按键按下时的回调\nconsole.log('onKeyDown',event);}"
},
{
"name": "onKeyPress",
"disabled": false,
"template": "onKeyPress(event,${extParams}){\n// 按键按下后的回调\nconsole.log('onKeyPress',event);}"
},
{
"name": "onKeyUp",
"disabled": false,
"template": "onKeyUp(event,${extParams}){\n// 按键释放回调\nconsole.log('onKeyUp',event);}"
},
{
"name": "onBlur",
"disabled": false,
"template": "onBlur(event,${extParams}){\n// 按键释放回调\nconsole.log('onBlur',event);}"
}
],
"eventDataList": [
{
"name": "onChange",
"type": "",
"paramStr": "{\n\t\"record\": this.record,\n\t\"index\": this.index, \n}",
"relatedEventName": "onChange_Input_Input1"
}
]
},
"bordered": true,
"disabled": false,
"onChange": {
"type": "JSFunction",
"value": "function(){return this.onChange_Input_Input1.apply(this,Array.prototype.slice.call(arguments).concat([{\n\t\"record\": this.record,\n\t\"index\": this.index, \n}]))}"
},
"placeholder": "Please enter",
"__component_name": "Input",
"_unsafe_MixedSetter____loop____select": "VariableSetter",
"ref": "input-c3a646dd",
"style": {
"display": "inline"
}
},
"title": "",
"hidden": false,
"isLocked": false,
"loopArgs": [
"",
""
],
"condition": true,
"conditionGroup": ""
}
]
}
]
}
]
}
```
## **Expected behavior (required)** / **预期行为(必填,非常重要)**
A clear and concise description of what did you expect to happen. / 请清晰和精确的描述你预期的行为
看起来key没有生效,应该与ProCode的react一致,非受控组件能够地对应
---
## **Screenshots (optional)** / **bug 截图(可选)**
Sceenshots for further information. (If applicable.) / 一些有用的截图将会帮助我们更好的明确以及定位问题
---
## **Environments (please complete the following information) (required):** / **请提供如下信息(必填)**
- AliLowCodeEngine version: [e.g. 1.0.0] / 低代码引擎版本
- AliLowCodeEngineExt version: [e.g. 1.0.0] / 低代码引擎扩展包版本
- Browser [e.g. chrome, safari] / 浏览器版本
- materials / plugins / tools / 其他物料 / 插件 / 工具链版本
> (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))
## **Additional context (optional)** / **更多额外信息(可选)**
Any other context of the problem here. / 可以追加更多的额外信息,帮助定位问题
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.