Почему компонент с двусторонней связью обновляется дважды в Svelte? - PullRequest
Новая
       97

Почему компонент с двусторонней связью обновляется дважды в Svelte?

2 голосов
/ 08 мая 2020

У меня <select> привязан к activity.status вот так: 

<script>
import Dropdown from './Dropdown.svelte'
let activity = {
    id: 1,
    projectName: "Test Project",
    lead: {id: 10, value: "Unassigned"},
    status: {id: 3, value: "Closed"},
    statusDetail: {id: 15, value: "Missing Budget"}
    }

let statusOptions = [
        { id:1, value:"Open"},
        { id:2, value:"On-Hold"},
        { id:3, value:"Closed"}
        ]

$:console.log(activity.status);
</script>

<select bind:value={activity.status}>
    {#each statusOptions as option}
        <option value={option} >{option.value}</option>
    {/each}
</select>

<!-- <Dropdown  options={statusOptions} bind:selected={activity.status}/> -->

$:console.log(activity.lead) срабатывает каждый раз, когда я обновляю <select>.

Но как только я использую <Dropdown/>, он срабатывает дважды. Вот компонент: 

<script>
export let selected = {} 
export let options = [{id:0, value: "No Options..."}]
</script>

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

У меня нет больших знаний в svelte, но я изучал API и искал в stackoverflow. Единственное, что я не пробовал, - это генерировать настраиваемое событие. Но это кажется лишним и нелегким. Я не против двойного обновления, но это кажется глупым. Итак, я хотел бы знать: Почему это происходит? Должен ли я вместо этого генерировать пользовательское событие? Или я сделал какую-то ошибку c?

Спасибо, Филип

1 Ответ

0 голосов
/ 09 мая 2020

моя проблема внезапно исчезла. Я подозреваю, что это как-то связано с одним элементом верхнего уровня, потому что он исчез после того, как я удалил другие элементы верхнего уровня в моем компоненте. Однако, когда я вернул их, он все еще работал, поэтому я больше не могу воссоздать проблему.

Svelte не требует, чтобы у вас был один элемент верхнего уровня, например Vue или React , поэтому Возможно, это была какая-то ошибка, но я не помню.

Также в официальном руководстве от Svelte они советуют людям экономно использовать привязки компонентов. Я отправляю ответ, если кто-то столкнулся с такой же проблемой. Удачи!

...