在 svelte 應用程序中的 +page.svelte 上沒有加載道具

Question

嗨，我正在嘗試從 API 獲取一些數據（FastAPI 在不同端口上的同一本地主機上運行）

這是 +page.js 代碼

/** @type {import('./$types').PageLoad} */

export async function load({ fetch }) {
    const res = await fetch('http://127.0.0.1:8000');
    let message = await res.json()
    message = message.message
    if (res.ok) {
        console.log(message)
        return {
            message
        }
    }

    throw error("No data Received")
}

這是+page.svelte：

<script>
    /** @type {import('./$types').PageData} */
    export let message;
</script>
<main>
    <div class="container">
        <h1>Hello World {message}</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae provident, labore qui modi minima voluptate perferendis est beatae non, molestias a, esse facilis deleniti error voluptatum iure harum magni debitis placeat ad! Amet numquam ratione iste?</p>
    </div>
</main>

<style>
    .container {
        width: 80%;
        margin: 0 auto;
        text-align: justify;
    }
    h1 {
        text-align: center;
    }
</style>

+page.js 中的 console.log(message) 正在記錄響應，但 +page.svelte 組件中的 {message} 變量未定義。 我究竟做錯了什么。

PS：我正在關注官方網站上的 sveltekit 文檔。

Answer 1

從各種文件（page.js、layout.js、...）傳下來的所有道具現在都可以在一個大data道具中使用。

<script>
 export let data;
 // assign it to a variable yourself
 $: message = data.message;
</script>

<!-- or use it directly from data -->
<h1>Hello {data.message}</h1>