变量更改不会在视图中呈现

Question

如果上述行的唯一标识符在 rows 数组中，则以下代码的目的是显示一行。为什么 Svelte 仅在几次点击后才以一种看似随机的方式更新视图？

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

        let rows = [
            {"name": "Alex", "id": "0"},
            {"name": "Steve", "id": "1"},
            {"name": "Mike", "id": "2"},
        ]; 
    
    let expandedRows = [];
    
    function toggleExpandRows(row_id_to_toggle) {
            console.log("Row to toggle:", row_id_to_toggle)
            console.log(expandedRows);
      if (expandedRows.includes(row_id_to_toggle)) {
                console.log(expandedRows, "includes", row_id_to_toggle)
        expandedRows = expandedRows.filter(expanded_row_id => expanded_row_id !== row_id_to_toggle)
      } else {
        expandedRows.push(row_id_to_toggle);
      }
    }

</script>

<div class="overflow-x-auto w-full">
  <table class="table table-compact w-full">
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      {#each rows as row (row.id)}
        <tr>
          <td>
            <button class="btn btn-xs" on:click={()=>toggleExpandRows(row.id)}>+/-</button>
          </td>
          <td class="min-w-[3rem] ">{row.name}</td>
        </tr>
            row.id: {JSON.stringify(row.id)}
        {#if expandedRows.includes(row.id)}
          <tr>
            <td colspan="2">-</td>
          </tr>
        {/if}

      {/each}
    </tbody>
  </table>
  Expanded: {JSON.stringify(expandedRows)}
</div>

REPL

Answer 1

除了expandedRows.push(row_id_to_toggle)，你还应该分配expandedRows，这样 Svelte 就会知道它已经改变了。
你可以试试：

.
.
.
else {
  expandedRows.push(row_id_to_toggle);
  expandedRows = expandedRows
}

Answer 2

反应性基于赋值，这就是为什么对于数组你也经常看到这种模式而不是push：

array = [...array, item];