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

Question

喂 :)

我正在尝试注册一个用户，成功后，将 setContext 设置为新注册的用户，然后导航到主页。服务器正确响应并注册用户，但是当调用 setContext 时出现以下错误:“index.mjs:552 Uncaught (in promise) Error: Function called outside component initialization”

    <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>

我做错了什么？

Answer 1

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

<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 中的一个有点神秘的句子中提到过。 :

Like lifecycle functions, this must be called during component initialisation.

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

编辑

我刚刚重读了您的问题，并意识到这真的只回答了一半......

setContext/getContext只能在组件初始化时使用一次，那么如何通过上下文共享您的 API 结果？相关:如果调用是在 Svelte 组件之外进行的，您将如何共享这些 API 结果，其中 setContext会更不可能(为了关注点分离问题，API 调用可以说是更好地定位)？

好吧，把 一家商店放在你的上下文中。

例如，使用可写存储:

<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> 的任何子组件, 并异步读取/写入。