英文:
Cannot bind to a variable declared with {#await ... then} or {:catch} blocks}
问题
这是一个很好的错误解释,但我不知道如何解决它。
我有一个+layout.js
文件,返回一个异步的load
函数:
import { api } from '$lib/utils/api';
/** @type {import('./$types').PageLoad} */
export async function load() {
const fetchUserData = async () => {
return await api.auth.user();
};
return {
stream: {
user: fetchUserData()
}
};
}
然后在+page.svelte
中,我使用{#await}
加载这个数据:
<script>
export let data;
let { stream } = data;
</script>
{#await stream.user then user}
<input type="text" bind:value={user.data.gender} />
{/await}
由于在等待完成之前我没有这些用户数据,所以我不知道如何将其绑定到输入框,如果我不能使用bind:value
的话。我在文档中找不到任何相关信息。
英文:
This is a nice error explanation but I don't know how to solve it.
I have a +layout.js
that returns a load
function async:
import { api } from '$lib/utils/api';
/** @type {import('./$types').PageLoad} */
export async function load() {
const fetchUserData = async () => {
return await api.auth.user();
};
return {
stream: {
user: fetchUserData()
}
};
}
Then in the +page.svelte
I load this data with {#await}
<script>
export let data;
let { stream } = data;
</script>
{#await stream.user then user}
<input type="text" bind:value={user.data.gender} />
{/await}
Since I don't have those user data before the await finishes, I don't know how to bind it to the input if I cannot use bind:value
. I cannot find anything from the documentation.
答案1
得分: 1
你可以将块的内容提取到一个单独的组件中。我强烈建议这样做,因为 user
只在 {#await}
块中可用,否则无法直接在 <script>
部分中使用。
{#await ... then user}
<UserEditor {user} />
{/await}
然后,在 UserEditor
内,你可以像往常一样进行绑定。
<script>
export let user;
</script>
<input bind:value={user.data.gender} />
英文:
You can extract the contents of the block to a separate component. I would recommend this anyway because user
is scoped to the {#await}
block and cannot be worked with directly in the <script>
part otherwise.
{#await ... then user}
<UserEditor {user} />
{/await}
Inside UserEditor
you then can bind as usual.
<script>
export let user;
</script>
<input bind:value={user.data.gender} />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论