Удаление ключей из объекта в состоянии компонента Svelte

У меня есть простой объект в состоянии, строка -> объекты. Мой пользовательский интерфейс отображает ключи и значения в цикле. У каждого объекта есть кнопка удаления. При нажатии я хочу удалить ключи (или установить для них значение «неопределено»), чтобы пользовательский интерфейс обновлялся.

На этой странице в руководстве по 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}

... оно работает.

Но читать это так противно и запутанно. Есть ли способ добиться такого поведения без присвоения переменной самой себе?

«Лучше» и «уродливее» являются самоуверенными и не подлежат однозначному ответу. Можете ли вы указать какие-то критерии, которые не являются двусмысленными?

possum 17.03.2024 10:47

Я полагал, что большинство людей согласятся, что присвоение переменной самой себе для запуска критически важных функций — это вонючий код.

Antrikshy 17.03.2024 18:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
149
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Существует шаблон создания нового объекта, который требует назначения и, следовательно, всегда вызывает реактивность (в Svelte 3/4); это характерно для массивов:

array = array.filter(v => v != valueToDelete)

Вы можете сделать что-то подобное здесь, но для объектов это будет значительно менее красиво:

object = Object.fromEntries(
  Object.entries(object).filter(([k]) => k != key)
)

(Хотя логику можно извлечь в функцию.)

Другие вопросы по теме