Svelte SuperForms数组响应性异常及绑定报错原因咨询

代码场景 #

表单初始化代码：

const { form } = superForm<CreateJobSchema>(data, {
  validators: typeboxClient(CREATE_JOB_SCHEMA),
  onError: (error) => {
    console.error(error)
    toast.error("Failed to create job. Please try again later.")
    isGenerating = false
  }
})

Schema定义：

const ScorecardSchema = Type.Object({
  description: Type.String(),
  weight: Type.Number()
})

export const CREATE_JOB_SCHEMA = Type.Object({
  title: Type.String(),
  description: Type.String(),
  tenantId: Type.String(),
  scorecard: Type.Array(ScorecardSchema)
})

添加项的UI代码：

<Button
  variant="outline"
  type="button"
  onclick={() => {
    $form.scorecard.push({
      description: "",
      weight: 0
    })
  }}>Add Criteria</Button
>
{#each $form.scorecard as scorecard}
  <div class="flex flex-col gap-2">
    <div class="flex items-center gap-2">
      <span>Description</span>
      <Input type="text" bind:value={scorecard.description} />
    </div>
  </div>
{/each}

出现的问题 #

• 点击「Add Criteria」按钮后，scorecard数组的变化无法触发UI更新，只有修改title或description等其他字段时，UI才会同步更新。
• 收到错误提示：

CreateJob.svelte?t=1739748167963:177 [svelte] binding_property_non_reactive
`bind:value={scorecard.description}` (src/routes/(authenticated)/jobs/create/CreateJob.svelte:66:31) is binding to a non-reactive property

• 数组原地修改无法触发响应式更新：Svelte的响应式系统依赖值的替换来追踪变化，直接使用push修改$form.scorecard属于原地修改数组，SuperForms的form store无法检测到这种变化，因此不会触发UI重渲染。只有当form对象本身被替换（比如修改其他顶层字段）时，才会触发整体更新。

• 新添加的对象非响应式：通过push添加的{description: "", weight: 0}是普通JavaScript对象，没有被转化为Svelte的响应式对象。当使用bind:value={scorecard.description}时，Svelte无法追踪这个普通对象属性的变化，因此抛出「绑定到非响应式属性」的错误。

补充：解决方法 #

1. 替换数组而非原地修改：使用扩展运算符创建新数组，替换原数组，触发响应式更新：

onclick={() => {
  $form.scorecard = [...$form.scorecard, { description: "", weight: 0 }]
}}

2. 确保新对象的响应式追踪：替换数组的方式会让新对象被纳入form的响应式体系中，此时bind:value就能正常追踪属性变化，无需额外处理单个对象的响应式。

内容的提问来源于stack exchange，提问作者dimiguel