使用setContext/getContext时响应式变量无法更新的问题

核心问题分析 #

你遇到的问题主要来自三个方面：

• 变量名错误：父组件里导出的是data，但校验时用了未定义的mydata，导致isValid从未被正确赋值。
• Context未响应式更新：setContext只在组件初始化时执行一次，后续isValid变化时，Context里的值不会同步更新。
• 子组件未追踪变化：直接解构Context结果无法自动感知父组件的值更新。

分步修复方案 #

1. 修正变量名错误 #

先把父组件里的校验目标改成正确的data，确保校验逻辑能正常执行：

<script lang='ts'>
  export let data;
  $: validationResult = myZodSchema.safeParse(data); // 将mydata改为data
  $: isValid = validationResult.success;

  setContext('my-form', {
    isValid
  })
</script>

2. 让Context支持响应式更新 #

有两种简单的方式实现Context值的同步：

方式一：随isValid变化重新设置Context

在响应式语句中调用setContext，每次isValid更新时同步更新Context：

<script lang='ts'>
  export let data;
  $: validationResult = myZodSchema.safeParse(data);
  $: isValid = validationResult.success;

  // 当isValid变化时自动更新Context
  $: setContext('my-form', { isValid });
</script>

方式二：用writable存储传递响应式引用（推荐）

使用Svelte的writable存储来保存isValid，这样子组件可以直接订阅值的变化：

<!-- 父Form组件 -->
<script lang='ts'>
  import { writable, setContext } from 'svelte';
  export let data;

  const isValid = writable(false);
  // 数据变化时更新存储值
  $: isValid.set(myZodSchema.safeParse(data).success);

  setContext('my-form', { isValid });
</script>

3. 子组件正确获取响应式值 #

如果用方式一，子组件需要通过响应式语句追踪Context里的isValid变化：

<!-- SubmitButton组件 -->
<script lang='ts'>
  import { getContext } from 'svelte';
  const formContext = getContext('my-form');
  // 实时追踪Context中的isValid值
  $: isValid = formContext?.isValid;
</script>

<button disabled={!isValid}>提交</button>

如果用方式二，子组件可以直接通过$语法访问存储的响应式值：

<!-- SubmitButton组件 -->
<script lang='ts'>
  import { getContext } from 'svelte';
  const { isValid } = getContext('my-form');
</script>

<button disabled={!$isValid}>提交</button>

内容的提问来源于stack exchange，提问作者Marcilio Leite