У меня есть простой объект в состоянии, строка -> объекты. Мой пользовательский интерфейс отображает ключи и значения в цикле. У каждого объекта есть кнопка удаления. При нажатии я хочу удалить ключи (или установить для них значение «неопределено»), чтобы пользовательский интерфейс обновлялся.
На этой странице в руководстве по Svelte написано:
Простое практическое правило: имя обновляемой переменной должно появиться в левой части присваивания. Например это...
const obj = { foo: { bar: 1 } }; const foo = obj.foo; foo.bar = 2;... не вызовет реактивности на obj.foo.bar, если вы не завершите это с помощью obj = obj.
Конечно же, если я обработаю щелчок следующим образом:
{#each Object.entries(objInState) as [key, value]}
{value}
<button on:click = {_ => delete objInState[key]}
{/each}
... страница ведет себя некорректно и не обновляется сразу. (То же самое с установкой неопределенного значения.)
И конечно же, когда я меняю это на:
{#each Object.entries(objInState) as [key, value]}
{value}
<button on:click = {_ => {
delete objInState[key]
objInState = objInState
}}
{/each}
... оно работает.
Но читать это так противно и запутанно. Есть ли способ добиться такого поведения без присвоения переменной самой себе?
Я полагал, что большинство людей согласятся, что присвоение переменной самой себе для запуска критически важных функций — это вонючий код.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Существует шаблон создания нового объекта, который требует назначения и, следовательно, всегда вызывает реактивность (в Svelte 3/4); это характерно для массивов:
array = array.filter(v => v != valueToDelete)
Вы можете сделать что-то подобное здесь, но для объектов это будет значительно менее красиво:
object = Object.fromEntries(
Object.entries(object).filter(([k]) => k != key)
)
(Хотя логику можно извлечь в функцию.)
«Лучше» и «уродливее» являются самоуверенными и не подлежат однозначному ответу. Можете ли вы указать какие-то критерии, которые не являются двусмысленными?