从异步分配值时与符文共享状态

Question

我对这些东西有点陌生，不确定我的方法是否错误。我想要一个类，并且需要从异步请求加载 schemaData。 但是当我获取 schemaData 时，状态在 updateSchema 之后没有更新。

    # SchemaManager.ts
    export class SchemaManager {
        schemaData: SchemaData = $state<SchemaData>({});
    
        updateSchema(data: any) {
            this.schemaData = this.organizeSchemaData(data);
        }
    }
    
    const SCHEMA_KEY = Symbol("SCHEMA_DATA");
    
    export function setSchemaState() {
        return setContext(SCHEMA_KEY, new SchemaManager());
    }
    
    export function getSchemaState() {
        return getContext<ReturnType<typeof setSchemaState>>(SCHEMA_KEY);
    }

 # layout.svelte
    
    setSchemaState();
    const schemaManager = getSchemaState();
    onMount(async () => {
        try {
            const response = await fetch("/json-schema");
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            schemaJson = await response.json();
    
            schemaManager.updateSchema(schemaJson);
            // console.log(schemaManager.getType("OBJECT", "Query"));
        } catch (e) {
            error = e instanceof Error ? e.message : String(e);
            console.log("error", error);
        }
    });

   # TextDecoderStream.svelte
    
    <script lang="ts">
        import { getSchemaState } from "$lib/utils/schemaToJsonUtils.svelte";
    const schemaManager = getSchemaState();
    const currentSchema = schemaManager.schemaData;
    console.log("schema", currentSchema);
    </script>

这里的console.log只是{}空对象，updateSchema后不会触发。我尝试将 setSchemaState 放在 onMount 中，但它不允许我在那里有上下文。

你能让我知道我应该采取什么方法吗？

Answer 1

这不是反应性的：

const schemaManager = getSchemaState();
const currentSchema = schemaManager.schemaData;

该值在执行时读取一次。

如果希望数值自动更新，则需要

$derived

:

const schemaManager = getSchemaState();
const currentSchema = $derived(schemaManager.schemaData);

要对更改做出反应，需要在

$effect

中访问这些值（不过，如果您只想观察更改，请使用仅开发的

$inspect

符文）。

const schemaManager = getSchemaState();
const currentSchema = $derived(schemaManager.schemaData);
$inspect(currentSchema)