[Bug Report] ArrayCollapse.useIndex 无法实时获取到对应的index

[cizhaYang]

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

Reproduction link

https://codesandbox.io/s/charming-bush-qobvpm?file=/App.tsx

Steps to reproduce

比如说现在开始添加1,2,3,4项

然后我把中间的3给删除了

结果就变成useIndex 就是1,2,4

What is expected?

期望变成1,2,3

What is actually happening?

这是我的代码 "x-component-props": { header: "{{ '' + (ArrayCollapse.useIndex())}}", expandIconPosition: "end", showArrow: false, extra: '{{ GetIcon("icon-a-chevronDown") }}' },

我是自定义header,在这里获取ArrayCollapse.useIndex()索引值，结果就是1,2,4，不能按照正常的顺序展示

Package

@formily/antd@2.1.4

---

[lumdzeehol]

提供一个最小复现链接吧

[cizhaYang]

https://codesandbox.io/s/charming-bush-qobvpm?file=/App.tsx

在这里获取ArrayCollapse.useIndex()会出问题

[janryWang]

不要在 表达式里用 React Hook，只能在组件内部使用

[cizhaYang]

不要在 表达式里用 React Hook，只能在组件内部使用

能不能给个使用的例子啊 不太会用

[Laurieliuren]

求使用例子，官网看的一脸懵逼

[Laurieliuren]

爬坑经验，给后来的老铁们参考，通过在x-reactions捣鼓一下，可以定制内容（Step 1: ）：

items: { type: 'object', 'x-component': 'ArrayCollapse.CollapsePanel', 'x-component-props': {}, properties: { index: { type: 'void', // 'x-component': 'ArrayCollapse.Index', 'x-reactions': [ { fulfill: { run: let state = $self.getState(); let path = state.path; const index = Number(path.split('.')[1]) + 1; const prefix = 'Step ' + index + ': '; let preHeader = $form.getFieldState(path.split('.index')[0]).component[1].header || ''; if(preHeader.includes(':')) { preHeader = preHeader.split(': ')[1] || ''; } $form.getFieldState(path.split('.index')[0]).component[1].header = prefix + preHeader; , }, }, ], } }

[Laurieliuren]

这个是JSON Schema格式的

[shwzh]

这 $self 从哪里获取的