javascript 苗条没有水合页面,[HMR][苗条]〈+页面>中出现不可恢复的HMR错误:下次更新将触发完全重新加载

bqujaahr  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(64)

我正在为我的网站使用Svelte和PocketBase。如果我转到一个页面,那么什么都不呈现,但当我刷新时,突然它就工作了。
[HMR][苗条]〈+page〉中出现不可恢复的HMR错误:下次更新将触发完全重新加载
我找不到任何关于这个的文件,我也找不到任何其他的问题
我的页面。苗条的文件。

<script lang="ts">
    export let data;
    const { product } = data;
</script>

<h1>{product.name}</h1>
<p>{product.price}</p>
<p>{product.desc}</p>
<p>{product.expand?.user?.username}</p>
<img
    class="avatar"
    src={`https://avatars.dicebear.com/api/identicon/${product.expand?.user?.username}.svg`}
    alt="avatar"
    width="40px"
/>
{#each product as x}
    <img
        class="avatar"
        src={x.url}
        alt="avatar"
        width="40px"
    />
{/each}

页面. ts文件

import { pb } from "$lib/pocketbase"

export const load = ({ params }: any) => {

    const fetchProduct = async (id: string) => {
        const product = await pb.collection('products').getOne(id, {
            expand: "user, image"
        },
        )
        console.log(product)
        return product
    }

    return {
        product: fetchProduct(params.productID)
    }
}
hgqdbh6s

hgqdbh6s1#

使load函数异步,然后等待fetchProduct函数调用。
在当前状态下,产品为Promise。

import { pb } from "$lib/pocketbase"

export const load = async ({ params }: any) => {

    const fetchProduct = async (id: string) => {
        const product = await pb.collection('products').getOne(id, {
            expand: "user, image"
        },
        )
        console.log(product)
        return product
    }

    return {
        product: await fetchProduct(params.productID)
    }
}

另外,对于React性:

<script lang="ts">
    export let data;
    $: ({ product } = data);
</script>

<h1>{product.name}</h1>
<p>{product.price}</p>
<p>{product.desc}</p>
<p>{product.expand?.user?.username}</p>
<img
    class="avatar"
    src={`https://avatars.dicebear.com/api/identicon/${product.expand?.user?.username}.svg`}
    alt="avatar"
    width="40px"
/>

    <img
        class="avatar"
        src={product.url}
        alt="avatar"
        width="40px"
    />

相关问题