Svelte 中的表格不会在道具更改时更新答案

【问题标题】：Table in Svelte doesn't update on prop changeSvelte 中的表格不会在道具更改时更新
【发布时间】：2021-09-03 20:49:09
【问题描述】：

我在 Svelte 中有一个表，它使用一个道具“事物”来存储要显示为数组的数据。当我在父类中创建表元素时，我传入了一个名为 $submissionsArr 的商店。 $submissionsArr 链接到 firebase 实时数据库 - 每当添加、更改或删除元素时，$submissionsArr 都会自动更新（此位工作正常；在更新中我将 $submissionsArr 分配回自身，以便 Svelte 注册它已更改） .但是，当 $submissionsArr 更新表时不会。

Table.svelte 类：

<script>
    import { createEventDispatcher } from "svelte";

    export let things;
    export let title;
    export let note;

    const dispatch = createEventDispatcher();

    function handleClick(thing, col) {
        dispatch("cellClick", {
            cell: thing,
        });
    }

    $: colNames = Object.keys(things[0]);
    let sortBy = { col: "", ascending: true };

    $: sort = (column) => {
        if (sortBy.col == column) {
            sortBy.ascending = !sortBy.ascending;
        } else {
            sortBy.col = column;
            sortBy.ascending = true;
        }

        // Modifier to sorting function for ascending or descending
        let sortModifier = sortBy.ascending ? 1 : -1;

        // works best for strings; not so good for numbers
        let sort = (a, b) =>
            a[column] < b[column]
                ? -1 * sortModifier
                : a[column] > b[column]
                ? 1 * sortModifier
                : 0;

        things = things.sort(sort);
    };
</script>

<div>{title}</div>

<table>
    <thead>
        <tr>
            {#each colNames as col}
                <th on:click={sort(col)}>{col} &varr;</th>
            {/each}
        </tr>
    </thead>
    <tbody>
        {#each things as thing}
            <tr>
                {#each colNames as col}
                    <td on:click={handleClick(thing, col)}>{thing[col]}</td>
                {/each}
            </tr>
        {/each}
    </tbody>
</table>

<div>{note}</div>

在父类SubmissionsTable.svelte中构造Table.svelte组件：

<script>
    import { submissionsArr } from "./stores.mjs";
    import Table from "./Table.svelte";
</script>

{#if $submissionsArr.length > 0}
        <Table
            things={$submissionsArr}
            title="Submissions"
            note="Click on a table cell to edit submission and view comments"
            on:cellClick={handleCellClick}
        />
{/if}

我该如何解决这个问题？

【问题讨论】：

标签： javascript firebase svelte

【解决方案1】：

为什么不用Svelte Store（订阅/取消订阅）

【讨论】：

我已经在使用 Svelte 存储（$submissionsArr 是在 stores.mjs 文件中定义的可写存储）。我不想直接引用 Table.svelte 类中的任何商店，因为我为了不同的目的多次重用这个类。我想保留导出语句和道具。