Svelte中binding_property_non_reactive错误原因咨询（基于$derived）

复现环境 #

• Svelte v5.42.3
• Svelte Kit v2.48.2
• @tanstack/svelte-query v6.0.3

组件代码 #

Player.svelte #

<script lang="ts">
    import { createQuery } from '@tanstack/svelte-query';

    const playerStore = createQuery(() => ({
        queryKey: "key",
        queryFn: playerById(page.params.player_id),
    }));

    let { data: player } = $derived(playerStore);
</script>

<FormPlayers bind:player={player} />

FormPlayers.svelte #

<script lang="ts">
    type Props = {
        player: Player;
    };

    let {
        player = $bindable(),
    }: Props = $props();
</script>

{#each player.skills as skill, index (skill.id)}
    <FormPlayerSkill bind:skill={player.skills[index]} />
{/each}

FormPlayerSkill.svelte #

<script lang="ts">
    type Props = {
        skill: PlayerSkillInput;
    };

    let {
        skill = $bindable()
    }: Props = $props();
</script>

<Date bind:date={skill.date} />

运行时错误 #

FormPlayers.svelte:77 [svelte] binding_property_non_reactive
`bind:skill={player.skills[index]}` (src/routes/players/FormPlayers.svelte:40:4) is binding to a non-reactive property

用户问题 #

1. 该错误产生的原因是什么？
2. 通过let { data: player } = $derived(playerStore)获取的player是否支持赋值、绑定、编辑等Svelte响应式操作？
3. 由于queryFn为异步函数，加载或重新获取数据需要耗时，必须使用let {data: player} = $derived(playerStore)的写法，该如何解决上述错误？

解答 #

错误原因 #

binding_property_non_reactive错误的核心原因：

• 从$derived获取的player是只读派生值，它依赖于TanStack Query的查询结果，本身并非Svelte的响应式状态对象。
• TanStack Query返回的原始数据是普通JS对象，其内部的skills数组及数组元素都没有被Svelte响应式系统包裹，无法追踪嵌套属性的变化，直接绑定会触发非响应式属性的错误提示。

$derived获取的player是否支持响应式操作？ #

通过let { data: player } = $derived(playerStore)获取的player：

• 不支持直接赋值（如player = {...newPlayer}），因为$derived的输出是只读的，会随着查询结果更新自动覆盖手动赋值。
• 嵌套属性的修改（如player.name = "newName"）不会触发Svelte的响应式更新，且绑定操作会因目标不是响应式代理而报错。

解决方案 #

要兼顾异步查询数据加载和编辑绑定需求，需要将查询结果转换为Svelte响应式状态，同时保留与原始查询数据的同步：

1. 创建本地响应式副本
   在Player.svelte中，用$state创建可编辑的响应式状态，监听查询结果变化同步数据：

   <script lang="ts">
       import { createQuery } from '@tanstack/svelte-query';
   
       const playerStore = createQuery(() => ({
           queryKey: "key",
           queryFn: playerById(page.params.player_id),
       }));
   
       // 初始化响应式状态，默认值为查询数据或空对象
       let player = $state($derived(playerStore).data ?? {});
   
       // 查询数据更新时同步到本地状态（仅初始加载或数据刷新时执行）
       $effect(() => {
           const newData = $derived(playerStore).data;
           if (newData) {
               // 浅拷贝避免直接修改原始查询数据
               player = {...newData, skills: [...newData.skills]};
           }
       });
   </script>
   
   <FormPlayers bind:player={player} />
   

2. 优化组件绑定逻辑
   在FormPlayers.svelte中，直接绑定循环的skill变量，无需通过数组索引访问：

   {#each player.skills as skill (skill.id)}
       <FormPlayerSkill bind:skill />
   {/each}
   

3. 确保嵌套对象响应式（可选）
   如果skill内部属性需要绑定编辑，可在FormPlayerSkill中创建本地响应式状态并同步到父组件：

   <script lang="ts">
       type Props = {
           skill: PlayerSkillInput;
       };
   
       let { skill = $bindable() }: Props = $props();
       // 将传入的skill转换为响应式状态
       let localSkill = $state({...skill});
   
       // 同步本地状态到父组件
       $effect(() => {
           skill = {...localSkill};
       });
   </script>
   
   <Date bind:date={localSkill.date} />
   

通过上述修改，所有绑定操作都作用于Svelte响应式状态，既支持正常编辑，也能保证数据变化被正确追踪。

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