Реактивный оператор выполняется при изменении дочернего реактивного оператора? - PullRequest
Новая
       2

Реактивный оператор выполняется при изменении дочернего реактивного оператора?

0 голосов
/ 21 апреля 2020

У меня есть два реактивных утверждения в Svelte. Когда дочерний оператор изменяется (на основе некоторого ввода), родительский оператор (оператор, от которого зависит дочерний оператор) также запускается. Проверьте следующий фрагмент: 

<script>
    const options = [
        {key: 'one'},
        {key: 'two'},
        {key: 'three'},
    ];

    // NOTE: initialOption may be obtained reactively from somewhere like the query string.
    $: initialOption = options[0];
    $: selectedOption = initialOption;

    $: console.log('initialOption reactivity:', initialOption);
    $: console.log('selectionOption reactivity:', selectedOption);
</script>

<select bind:value={selectedOption}>
    {#each options as opt}
    <option value={opt}>{opt.key}</option>
    {/each}
</select>

https://svelte.dev/repl/bdc48c75acf94a9ca13da377b7cd8f19?version=3.20.1

Если вы запускаете фрагмент выше, каждый раз, когда вы пытаетесь выбрать из раскрывающегося списка (который является привязанный к selectedOption), назначение initialOption, кажется, вызвано повторно, почему? Это ожидаемое поведение?

1 Ответ

1 голос
/ 22 апреля 2020

Проблема двоякая:

  • вы присваиваете свои объекты, которые в javascript назначены по ссылке, а не по значению, для ваших реактивных переменных
  • one эти переменные также связаны (в двустороннем связывании) со свойством value вашего select элемента

Когда вы взаимодействуете со своим select входом, вы обновляете значение selectedOption, который в свою очередь обновляет initialOption (поскольку обе переменные являются ссылками на один и тот же объект).

У вас есть два способа решения этой проблемы:

  1. вместо этого используйте скаляры объектов в вашем массиве опций
  2. связываются с обычной переменной вместо реактивной и вместо этого используют реактивный код для инициализации переменной

Оба подхода демонстрируются в этом РЕПЛ

...