Svelte on: функция щелчка обновляет данные, но не пользовательский интерфейс - PullRequest
Новая
       32

Svelte on: функция щелчка обновляет данные, но не пользовательский интерфейс

1 голос
/ 10 июля 2020

Я новичок в Svelte, поэтому подозреваю, что это очень фундаментальная проблема непонимания.

Может кто-нибудь объяснить, почему on: click обновляет пользовательский интерфейс, но пользовательский интерфейс не обновляется, если я попытаться использовать changeJob (items)? В console.log указано, что все задания были изменены в массиве, но пользовательский интерфейс не отражает этого. 

<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

1 Ответ

2 голосов
/ 13 июля 2020

Когда у вас есть такой код ... 

items[0].job = 'clown'

... Svelte понимает, что ему нужно обновить все, что зависит от items, потому что это присвоение свойству чего-то распознается как переменная верхнего уровня внутри <script>.

Но когда вы это делаете ... 

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

... вы не присваиваете свойство переменной верхнего уровня, вы назначаете свойству локальной переменной arr внутри функции. Он фактически непрозрачен для Svelte.

Он будет работать, если вы просто избавитесь от локальной переменной, например: 

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