[英]Fetch new page when user clicks a button using Svelte and Sapper
I am stuck at the part that fetch more data when user clicks a button on bottom of a page using Svelte and Sapper.当用户使用 Svelte 和 Sapper 单击页面底部的按钮时,我被困在获取更多数据的部分。
Here is the code.这是代码。
<script context="module">
export function preload(page) {
return this.fetch(`https://reqres.in/api/users?page=${$count}`) // I know this is not goint to work. but when the button is clicked, I want to fetch page 2 and merge it with page 1 data, show data in ascending order(page1, page2)
.then(res1 => {
return res1.json()
}).then(res2 => {
return {
currentPage: res2.page,
per_page: res2.per_page,
notices: res2.data,
total: res2.total,
totalPage: res2.total_pages
}
})
}
</script>
<script>
import { count } from '../../store.js'; // export const count = writable(1); from store.js file
export let currentPage; // 1
export let per_page; // 6
export let notices;
export let total; // 12
export let totalPage; // 2
const handleClick= () => {
if ($count < totalPage) {
count.update(n => n + 1); // update count 1 to 2 and want to deliver changed value to fetch new page
}
}
</script>
<main>
<div id="container">
<h1 class="cont-tit">Notice Board</h1>
<div class="noti-list-wrap">
{#each notices as notice, i}
<ul class="noti-list">
<li>
<a rel=prefetch href={`notice/${notice.id}`}>
<p class="tit">{`${notice.first_name} ${notice.last_name}`}</p>
<hr />
<p class="date">
{`notice no.${i}`}
</p>
</a>
</li>
</ul>
{/each}
<div class="show-more" on:click={handleClick}>show me more</div>
</div>
</div>
</main>
At first I thought I could use $count to fetch page 2 data but import count store inside script context="module" won't work.起初我以为我可以使用 $count 来获取第 2 页数据,但在脚本 context="module" 中导入计数存储将不起作用。
Is there a way to deliver changed value of store to function preload?有没有办法将更改的存储值传递给 function 预加载?
Don't try to load the extra data inside preload
.不要尝试在
preload
中加载额外的数据。 Instead, treat that as the initial data — which it is — and append to it the normal way.相反,将其视为初始数据 - 它是 - 和 append 以正常方式处理它。
This is a simplified version — it doesn't worry about error handling, race conditions, or an initial page other than 1
— to give a general idea of what I mean:这是一个简化版本——它不担心错误处理、竞争条件或
1
以外的初始页面——以大致了解我的意思:
<script context="module">
export async function preload(page) {
const res = await this.fetch('https://reqres.in/api/users?page=1');
const data = await res.json();
return {
currentPage: data.page,
per_page: data.per_page,
notices: data.data,
total: data.total,
totalPage: data.total_pages
};
}
</script>
<script>
export let currentPage;
export let per_page;
export let notices;
export let total;
export let totalPage;
const load_more = async () => {
currentPage += 1;
const res = await fetch('https://reqres.in/api/users?page=' + currentPage);
const data = await res.json();
notices = notices.concat(data.data);
};
</script>
<!-- other stuff -->
{#if currentPage < totalPage}
<button on:click={load_more}>show me more</button>
{/if}
I usually use the shortcut also to update the store value, like so:我通常也使用快捷方式来更新存储值,如下所示:
const handleClick= () => {
if ($count < totalPage) {
$count = $count + 1); // update count 1 to 2 and want to deliver changed value to fetch new page
}
}
I don't see the code where you actually fetch the nth page base on count
.我没有看到您基于
count
实际获取第 n 页的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.