charlzyx
commented
1 year ago 补充一个 jest 测试用例, 很奇怪, 跟 demo 表现并不一致
破案了, 在上述demo中, line: 44-48
{props.value?.map((item, index) => {
return (
<div key={index} style={{ marginBottom: 10, display: "flex" }}>
<RecursionField name={index} schema={schema.items} />
<button onClick={() => field.remove(index)}>Delete</button>
</div>
);
})}这里的数组 key 给了个 index, 事件经过如下
- 删除第二条数据 remove(1), 经过下面一系列方法调用, 最终触发了 field.dispose 方法调用链: (packages/core) ArrayField.ts#remove -> internals.ts#spliceArrayState -> internals.ts#patchFieldStates -> internals.ts#destroy -> field?.dispose(); 这几个响应式数据模型操作没有任何问题
- 在 react 环境下, mouted 状态是
packages/react/hooks/useAttach.ts->onMount/onUnmount来修改的, 而index作为列表项的key这个 经典问题, 又在这里得到了验证: 第二条数据删除触发了unMount, 但第三条来补位并没有触发onMount这里就不展开了(因为我也不太明白) - 在 jest 环境中, mount 则是通过 内部的
packages/core/src/__test__/shared.ts简单的手动执行, 所以在 jest 环境中没有复现export const attach = <T extends { onMount: () => void }>(target: T): T => { target.onMount() return target }所以, demo 中的修复方案就是, 给列表项一个稳定的key
{props.value?.map((item, index) => {
return (
- <div key={index} style={{ marginBottom: 10, display: "flex" }}>
+ <div key={item.key} style={{ marginBottom: 10, display: "flex" }}>
<RecursionField name={index} schema={schema.items} />
<button onClick={() => field.remove(index)}>Delete</button>
</div>
);
})}
//...
field.setValue([
- { aa: { input: "1" } },
- { aa: { input: "2" } },
- { aa: { input: "3" } }
+ { aa: { input: "1" }, key: 1 },
+ { aa: { input: "2" }, key: 2 },
+ { aa: { input: "3" }, key: 3 }
]);https://github.com/alibaba/formily/assets/18055018/c0ab25a4-7cb2-4c1d-84a9-d10226c8a0c7
以下是最初的测试代码和输出结果
3941.spec.ts
```ts import { createForm, isArrayField, isDataField, onFieldInputValueChange, } from '../' import { attach } from './shared' test('test 3941', () => { let record = '' const form = attach( createForm({ effects: () => { onFieldInputValueChange('*', (field) => { if (isDataField(field) && !isArrayField(field)) { record = [field.path, 'mounted', field.mounted.toString()].join(' ') } }) }, }) ) const array = attach( form.createArrayField({ name: 'array', }) ) const ObjectField1 = attach( form.createObjectField({ name: 'aa', basePath: 'array.0', }) ) const Field1 = attach( form.createField({ name: 'input', basePath: 'array.0.aa', }) ) const ObjectField2 = attach( form.createObjectField({ name: 'aa', basePath: 'array.1', }) ) const Field2 = attach( form.createField({ name: 'input', basePath: 'array.1.aa', }) ) const ObjectField3 = attach( form.createObjectField({ name: 'aa', basePath: 'array.2', }) ) const Field3 = attach( form.createField({ name: 'input', basePath: 'array.2.aa', }) ) array.setValue([ { aa: { input: '1' } }, { aa: { input: '2' } }, { aa: { input: '3' } }, ]) console.log('before1:', Field1.address.entire, Field1.value) console.log('before2:', Field2.address.entire, Field2.value) console.log('before3:', Field3.address.entire, Field3.value) array.remove(1) console.log('after1:', Field1.address.entire, Field1.value) console.log('after2:', Field2.address.entire, Field2.value) console.log('after3:', Field3.address.entire, Field3.value) expect(Field2.value).toBe('3') expect(Field2.mounted).toBe(true) expect(ObjectField2.mounted).toBe(true) Field2.onInput('22') expect(record).toBe('array.1.aa.input mounted true') expect(Field2.value).toBe('22') }) ```输出
```log PASS packages/core/src/__tests__/3941.spec.ts ✓ test 3941 (24 ms) console.log before1: array.0.aa.input 1 at Object.综上, 这应该是使用的问题, 而不是 formily 的bug
另一个思路是, 因为这个attach也好, useAttach 也好, 只影响的 mounted/unmounted 这两个字段, 因此
在 packages/core/src/shared/internals.ts#patchFieldStates 方法中的 update 分支语句中, 强行修正 traget.mounted = true;traget.unmounted = false; (可以根据是否之前位置是否删除再加一些优化判断)
但这只是 react 的会遇到的问题, 不是core的问题, 我个人是不赞同进行这样的修复, 而是尊重 react 的约定, 使用稳定的 key
Reproduction link
Steps to reproduce
What is expected?
After removing an item from the array, the mounted property of the remaining items should remain
true.What is actually happening?
After removing an item from the array, the mounted property of the remaining items incorrectly becomes
false.Package
@formily/core@2.2.29
This issue impacts the accurate tracking of the mounted state of array items, potentially leading to incorrect behaviours or rendering inconsistencies in complex forms.