Svelte - 将数组元素作为 on 传递：通过引用单击参数并使数组反应

Question

我有一个对象数组，每个对象代表一列（在表中）

然后我循环遍历这个数组以输出列。每列可以显示一个按钮，单击该按钮可更改对象中的一个属性。它通过将列对象作为参数传递给函数来做到这一点。数组应该被更新并且变化反映在界面中。

代码：

<script lang="ts">
    let columns = [
        {
            name: 'id',
            sortable: true,
            sortState: '',
        },
        {
            name: 'description',
            sortable: false,
            sortState: '',
        }
    ];

    function onColumnSortClick(column) {
        column.sortState = "asc";
    }
<script>

{#each columns as column}
    <div>
        {column.name} -
        {column.sortState}
        <button on:click={() => { onColumnSortClick(column)}}>-</button>
    </div>
{/each}

如您所见，column.sortState 显示在循环中，列对象作为参数传递给 onColumnSortClick 函数，其中 sortState 更改为'上升'。这应该会在该列的循环中更新 sortState 的显示，但这不会发生。 columns 的 console.log 显示数组已更新，但反应式显示未更新。

如果我从以下相同的函数更新主数组，它会按预期工作：

function onColumnSortClick(column) {
    columns[0].sortState = "asc";
}

我正在尝试做的事情可能吗？

Answer 1

您可以简单地将column 的索引（而不是对column 本身的引用）传递给您的处理程序，如下所示：

{#each columns as column, i}
    <div>
        {column.name} -
        {column.sortState}
        <button on:click={() => { onColumnSortClick(i)}}>-</button>
    </div>
{/each}

然后您的处理程序将如下所示：

function onColumnSortClick(i) {
    columns[i].sortState = "asc";
}