时间戳

首页 > 解决方案 > Svelte on:click 功能更新数据，但不更新 UI

javascript - Svelte on:click 功能更新数据，但不更新 UI

问题描述

我是 Svelte 的新手，所以我怀疑这是一个非常根本的缺乏理解的问题。

有人可以解释为什么 on:click 会更新 UI，但如果我尝试使用 changeJob(items)，则 UI 不会更新？console.log 表明数组中的所有作业都已更改，但 UI 并未反映这一点。

<script>
  import ListItem from './ListItem.svelte';

  let items = [
    { name: 'John', age: 23, job: 'plumber'},
    { name: 'Jane', age: 45, job: 'hair stylist'},
    { name: 'Juan', age: 18, job: 'student'},
  ];

  const changeJob = (arr) => {
    console.log(arr[0].job);
    arr[0].job = 'clown';
    console.log(arr[0].job);
  }

</script>

<button on:click={() => items[0].job = 'clown'}>Clownify</button>

<ul>
  {#each items as item }
    <ListItem {...item}/>
  {/each}
</ul>

代码片段：REPL

标签： javascriptsvelte

解决方案

当你有这样的代码时......

items[0].job = 'clown'

...Svelte 明白它需要更新任何依赖于的东西items，因为赋值是对它识别为内部顶级变量的东西的属性<script>。

但是当你这样做时...

const changeJob = (arr) => {
  arr[0].job = 'clown';
}

...您不是分配给顶级变量的属性，而是分配给arr函数内部局部变量的属性。它对 Svelte 来说实际上是不透明的。

如果您只是摆脱局部变量，它将起作用，如下所示：

const changeJob = () => {
  items[0].job = 'clown';
}

推荐阅读