Как мне перерисовать компонент при изменении переменной, который определяет состояние с помощью функции? - PullRequest
Новая
       6

Как мне перерисовать компонент при изменении переменной, который определяет состояние с помощью функции?

0 голосов
/ 31 марта 2020

У меня есть компонент, который поддерживает выбор в виде массива, и дочерний компонент, который определяет его состояние, проверяя, включен ли он в этот массив. Когда я изменяю массив, дочерний компонент не рендерится повторно. Как это исправить?

REPL: https://svelte.dev/repl/f2074ef75dee444faaee005b8b7cf9b9

App.svelte 

<script>
    import Nested from "./Nested.svelte";

    let selection = [];

    function isSelected(n) {
        return selection.indexOf(n) > -1;
    }

    function click(e) {
        const n = e.detail.number;
        if (isSelected(n)) {
            selection = selection.filter(x => x != n);
        } else {
            selection = [...selection, n];
        }
        console.log("Selection is", selection);
    }
</script>

{#each [1, 2, 3] as number}
    <Nested
                    {number}
                    selected={isSelected(number)}
                    on:click={click} />
{/each}

Nested.svelte 

<script>
    export let selected, number;
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();

    function click() {
        dispatch("click", {
            number
        });
    }

</script>

<style>
    .selected {
        color: red;
    }
</style>

<div class:selected={selected} on:click={click}>
    {number}
</div>

1 Ответ

0 голосов
/ 31 марта 2020

Проблема в следующем 

    selected={isSelected(number)}

В этом выражении: 

              isSelected(number)

Svelte будет обновляться при каждом изменении любой переменной в выражении. То есть: либо isSelected, либо number.

В вашем случае вы хотите отреагировать на изменение selection, и поэтому оно этого не делает.

Вы может встроить условие, так что переменная selection прямо упоминается в выражении: 

    selected={selection.indexOf(number) > -1}

Или вы можете просто сделать это: 

    selected={selection, isSelected(number)}

Синтаксис запятой x, y это просто несколько неясный синтаксис JS для выражения, значение которого разрешается до последнего элемента (попробуйте 'a', 'b', 'c' в вашей консоли, чтобы понять, что я имею в виду) ... Но в этом случае он позволяет намекнуть Svelte, что ему следует обратить внимание к переменной selection здесь.

...