点击链接时，工兵不重新加载数据

问题描述

我正在使用 sapper 构建网站并从 API 请求数据。到目前为止，它一直运行顺利。

当我从 site.com/title/id1 转到 site.com/title/id2 时，直到我点击手动刷新，才会加载新信息。有什么想法吗？

import { stores,goto } from "@sapper/app";
import Card from "../_titlecard.svelte";

const { page } = stores();
const { slug } = $page.params;

import { onMount } from "svelte";
let looper = [];
let artistName = "";
let titleName = "";
let dvdCover = "";
let titleCover = "";
let genre = "";
let tracks = [];
onMount(async () => {
  const res = await fetch(`https://.com/api/title/${slug}`);

  const data = await res.json();

  artistName = data.artistName;
  titleName = data.name;
  dvdCover = data.graphics.dvd;
  titleCover = data.graphics.landscape;
  genre = data.genre;
  tracks = data.tracks.length;

  const res2 = await fetch(`https://.com/api/artists/all`);
  const data2 = await res2.json();

  let moreTitles = [];
  const more = data2.map((x) => {
    if (x.titles.length > 0 && x.genre === genre) {
      looper.push(x.titles[0]);

      looper = moreTitles;
    }
  });
});

然后我在 html 中有这个

{#each looper.slice(0,4) as item,i} 
  <Card imgurl={item.graphics.dvd} concert={item.name} id={item.id} />
{/each}

解决方法

如果导航导致使用相同的页面组件，则不会卸载并再次安装页面组件，因此您的 onMount 将仅与第一个 id 一起运行一次。

您可以使用 reactive statement 来确保每次 $page.params.slug 更改时都运行所需的代码。

示例

import { stores,goto } from "@sapper/app";
import Card from "../_titlecard.svelte";
const { page } = stores();

let looper = [];
let artistName = "";
let titleName = "";
let dvdCover = "";
let titleCover = "";
let genre = "";
let tracks = [];

$: (async () => {
  const { slug } = $page.params;

  const res = await fetch(`https://.com/api/title/${slug}`);
  const data = await res.json();

  artistName = data.artistName;
  titleName = data.name;
  dvdCover = data.graphics.dvd;
  titleCover = data.graphics.landscape;
  genre = data.genre;
  tracks = data.tracks.length;

  const res2 = await fetch(`https://.com/api/artists/all`);
  const data2 = await res2.json();

  let moreTitles = [];
  data2.forEach((x) => {
    if (x.titles.length > 0 && x.genre === genre) {
      moreTitles.push(x.titles[0]);
    }
  });

  looper = moreTitles;
})();