Why do I get error "Uncaught (in promise) TypeError: firstnamef is null"?

Why do I get error "Uncaught (in promise) TypeError: firstnamef is null"?

为什么我在 sveltekit 中随机出现这个错误?它仍然每次使用 prisma 从端点获取值 result.firstname。

“未捕获(承诺)TypeError:firstnamef 为空”

<script>
  import { onMount } from 'svelte';
  import { session } from '$app/stores';

  let firstnamef;
  let result;

  async function setValues() {
    const response = await fetch('./api/actions?id=' + $session.userID, {
      method: 'get',
    });
    result = await response.json();
    firstnamef.value = result.firstname;
  }

  onMount(async () => {
    setValues();
  });
</script>

<input type="text" name="firstname" bind:this={firstnamef} />

我的猜测是该组件已被破坏(例如导航离开可能会导致这种情况)。销毁后 DOM 引用将是 null.

REPL demonstration

在这种情况下,您可以检查 null 的 DOM 参考或使用 onDestroy 挂钩跟踪组件状态。