设置储值的 Svelte 用户注册问题

helo :)

我正在尝试注册用户，成功后将 setContext 设置为新注册的用户，然后导航到主页。服务器正确响应并注册用户，但是当调用 setContext 时，我收到以下错误：“index.mjs：552 Uncaught（在承诺中）错误：在组件初始化之外调用的函数”

    <script>
    import { setContext } from 'svelte'

    async function handleRegistration(e) {
        let user = {
                    firstname: e.target.firstname.value,
                    lastname: e.target.lastname.value,
                }

                fetch('http://localhost:3001/api/auth/register', {
                    method: 'POST',
                    headers: {'Content-Type':'application/json'},
                    body: JSON.stringify(user)
                })
                .then(res => res.json())
                .then(res => {
                    if(res.accessToken) {
                        user.accessToken = res.accessToken
                        user.refreshToken = res.refreshToken
                        setContext('userData', user)
                        navigate("/", { replace: true })
                    }
                })

                updateContext(user)
            }
    }
</script>

<form class="registration" on:submit|preventDefault="{handleRegistration}">
</form>

我究竟做错了什么？

setContext必须在组件初始化期间同步调用。也就是说，从根<script> tag:

<script>
  import { setContext } from 'svelte'

  console.log('init')

  setContext(...) // OK

  setTimeout(() => {
    setContext(...) // Not OK (we're not synchronous anymore)
  }, 0)
<script>

<h1>My Svelte Component</h1>

这篇文章中的一个神秘的小句子提到了这一点docs https://svelte.dev/docs#setContext:

与生命周期函数一样，必须在组件初始化期间调用它。

其他生命周期函数有onMount, onDestroy等等。可以说不太明显的是setContext就是这样一个生命周期方法。

Edit

我刚刚重读了你的问题，发现这实际上只回答了一半......

setContext / getContext只能在组件初始化时使用一次，那么如何通过上下文共享 API 结果呢？相关：如果调用是在 Svelte 组件外部进行的，您将如何共享这些 API 结果，其中setContext更不可能（而且 API 调用可能会更好定位，因为关注点分离问题）？

说得好a store在你的情况下。

例如，对于可写存储：

<script>
  import { getContext } from 'svelte'

  const userData = getContext('userData')

  function handleRegistration(e) {
    doSuperApiCall()
      .then(data => {
        userData.set(data)
        // or fancy:
        $userData = data
      })
      .catch(...)
  }
</script>
...

在某些更高包装组件的初始化期间将此存储放入上下文中（例如<App>):

<script>
  import { setContext } from 'svelte'
  import { writable } from 'svelte/store'

  const userData = writable(null)

  setContext('userData', userData)
</script>

<slot />

这样您就可以轻松访问您的商店getContext来自（例如）的任何子组件<App>，并异步读取/写入。