Как исправить нереактивные вложенные объекты внутри $state([]) в Svelte? ⇐ Javascript

[Anonymous]

Вот ссылка на репродукцию (Svelte Playground).
Проблема в том, что когда вы добавляете «путевую точку» и устанавливаете флажок, чтобы включить ее направление (таким образом изменяя соответствующий вложенный объект включено), Svelte не увидит эти изменения. Я это вижу, потому что влияние на строки 41-44 ничего не зарегистрирует. Если вместо этого я использую $inpsect, тоже ничего не будет.

Код: Выделить всё

let { directions, configuration } = {directions: {waypointsBearings: [], configuration: {bearings: true}}, on: () => {}, configuration: {}}

// @ts-expect-error It's safe to read the plugin's protected properties here.
if (!directions.configuration.bearings) {
console.warn("The Bearings Control is used, but the `bearings` configuration option is not enabled!");
}

function addWaypoint() {
directions.waypointsBearings.push({enabled: false})
onWaypointsChanged()
}

let waypointsBearings: {
enabled: boolean;
angle: number;
degrees: number;
}[] = $state([]);

// directions.on("addwaypoint", onWaypointsChanged);
// directions.on("removewaypoint", onWaypointsChanged);
// directions.on("movewaypoint", onWaypointsChanged);
// directions.on("setwaypoints", onWaypointsChanged);

function onWaypointsChanged() {
waypointsBearings = directions.waypointsBearings.map((waypointBearing, index) => {
if (waypointsBearings[index]) return waypointsBearings[index];

return {
enabled: configuration.defaultEnabled || !!waypointBearing,
angle: waypointBearing ? waypointBearing[0] : configuration.angleDefault,
degrees: waypointBearing
? waypointBearing[1]
: configuration.fixedDegrees
? configuration.fixedDegrees
: configuration.degreesDefault,
};
});
}

$effect(() => {
console.log("PIA");
console.log(waypointsBearings);
});

onWaypointsChanged();

(Функция addWaypoint является искусственной и служит для замены закомментированных вызовов Directions.on. Она здесь просто для замены реальной карты и ее интерактивности) .

Код: Выделить всё

Add


{#each waypointsBearings as waypointBearing, i}

{i + 1}. 

Я предполагаю, что отсутствие реактивности для внутренних объектов является лишь частью более широкой проблемы (см. контекст ниже), но для начала этого должно быть достаточно.
Вот более широкий контекст проблемы. У меня есть рабочий код (Svelte 4), который я пытаюсь переписать в Svelte 5. Вы можете увидеть рабочий код Svelte 4 здесь, а увидеть его в действии (убедиться, что он действительно работает нормально) здесь (попробуйте нажать на карту). чтобы добавить путевые точки, чтобы появилась панель «азимутов»).

Подробнее здесь: https://stackoverflow.com/questions/793 ... -in-svelte