Bug Fixes Demo

验证关键 bug 修复效果

🔧 Bug 3: FieldArray 路径重映射

问题:删除数组中间项后,后续项的字段状态路径没有更新,导致验证错误显示在错误的字段上。

测试步骤

  1. 初始数组有 3 项:Item A、Item B、Item C
  2. 点击"删除 Item B"按钮
  3. 检查字段状态路径是否正确重映射
Item 0
Item 1
Item 2

Field States 对比

删除前:
Click "Remove Item B" to test
删除后:
Waiting...

期望结果: 删除后 items[1] 应该指向 "Item C"(原来的 items[2]),items[2] 应该被删除

🔧 Bug 4: 依赖字段 onChange 触发

问题:当依赖的字段变化时,验证虽然执行了,但没有触发 onFieldChange 事件,导致 UI 不更新。

测试步骤

  1. maxValue 依赖于 minValue(必须大于 minValue)
  2. 初始值:minValue=10, maxValue=20(有效)
  3. 修改 minValue 为 25(现在 maxValue 应该显示错误)

期望结果: 修改 minValue 后,maxValue 的错误信息应该立即出现(无需手动 blur)

🔧 Bug 2: 动态字段自动注销

问题:条件渲染的字段在销毁后没有从 fieldStates 中移除,导致内存泄漏。

测试步骤

  1. 点击"Show Optional Field"显示动态字段
  2. 点击"Hide Optional Field"隐藏动态字段
  3. 重复几次
  4. 检查 fieldStates 数量是否保持稳定

Mount Count: 0

Unmount Count: 0

Field States Count: 2

Field Paths: minValue, maxValue

期望结果: 隐藏字段后,fieldStates 应该减少 1,不应该累积 optionalField

🔧 Bug 1: Observer 内存泄漏(已修复)

问题:useFormState 订阅的观察者在组件销毁后没有取消订阅,导致内存泄漏。
修复:现在提供 destroy() 方法,用户可以在 onDestroy 中调用。

修复前(❌ 会泄漏):

const form = useFormState({ ... });
// 组件销毁后 observer 仍然存在!

修复后(✅ 正确):

import { onDestroy } from 'svelte';

const form = useFormState({ ... });

onDestroy(() => {
  form.destroy(); // 取消订阅
});