为什么复选框在这个反应性内部对象中不起作用？

Question

为什么复选框在这里不起作用？

我认为 Svelte 正在重新评估 innerTeam 更改，但我不明白为什么。

我正在更改 innerTeam 而不是 team。

只有当 team 发生变化时，我才使用反应式语法来改变 innterTeam！不是相反！

回复：https://svelte.dev/repl/1ef7657adbc545a0b595e2ab58069b4a?version=3.42.4

App.svelte:

<script>
    import {onMount} from "svelte";
    import Inner from "./Inner.svelte"
    
    let team = {
        player: {id: "1", name: "John"},
        full: false
    }
    
    onMount(() => setTimeout(()=> {
        team = { player: {id: "2", name: "Bob"} }
    }, 4000))
</script>

team: <pre>{JSON.stringify(team, null, 2)}</pre>

<Inner {team}></Inner>

Inner.svelte:

<script>        
    export let team = undefined;
    
    let innerTeam;
    
    $: innerTeam = {
        ...team,
        cars: []
    }
    
    function addCar() {
        innerTeam.cars = [...innerTeam.cars, {id: "1", brand: "BMW"}]
    }   
</script>

<button on:click={addCar}>
    Add car to customTeam
</button>

<br>

<input bind:checked={innerTeam.full} type="checkbox"/> Full?

<br>

customTeam: <pre>{JSON.stringify(innerTeam, null, 2)}</pre>

Answer 1

I'm using that reactive syntax to change innterTeam only if team changes! Not the other way!

嗯，不是真的。您正在做出关于 innerTeam 的反应性声明，因此任何时候 innerTeam 或 team 更改 innerTeam 都会更新。在您的情况下，innerTeam.full 是来自 team 的值，每当 innerTeam 更改重置 innerTeam 等于 ...team, cars: [] 您将 full 更改为 true 时，您就会告诉 Svelte， Svelte 会按照您的指示将其改回原样。

如果您希望反应性基于 team，您可以做出关于 team 的反应性声明并让它调用更新 innerTeam:

的函数

let innerTeam

function updateInner() {
    innerTeam = {
        ...team,
        cars: []
    }
}
    
$: team, updateInner()

但是，这样做意味着当团队更新时，添加的任何汽车都将消失。不确定这是否是您想要的，但它看起来像您描述的那样。

这里有一个 REPL 显示的行为，如果您添加汽车并单击“增加 ID#”按钮，汽车就会消失。

为什么复选框在这个反应性内部对象中不起作用？

Why the checkbox doesn't work in this reactive inner object?

svelte

svelte-3