当用户使用 Svelte 和 Sapper 单击按钮时获取新页面

Question

当用户使用 Svelte 和 Sapper 单击页面底部的按钮时，我卡在获取更多数据的部分。

这是代码。

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

起初我以为我可以使用 $count 来获取第 2 页的数据，但是在 script context="module" 中导入计数存储将不起作用。

有没有办法将存储的更改值传递给函数预加载？

Answer 1

我通常也使用快捷方式来更新存储值，像这样：

const handleClick= () => {
    if ($count < totalPage) {
      $count = $count + 1); // update count 1 to 2 and want to deliver changed value to fetch new page
    }
  }

我没有看到您实际基于 count 获取第 n 页的代码。

Answer 2

不要尝试在 preload 中加载额外的数据。相反，将其视为初始数据 - 它是 - 并以正常方式附加到它。

这是一个简化版本 — 它不担心错误处理、竞争条件或除 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}

当用户使用 Svelte 和 Sapper 单击按钮时获取新页面

Fetch new page when user clicks a button using Svelte and Sapper

javascript

svelte

sapper