Sapper не перезагружает данные при переходе по ссылке

Я создаю сайт с помощью 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}
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
2
0
452
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Компонент страницы не размонтируется и не монтируется снова, если в результате навигации используется тот же компонент страницы, поэтому ваш onMount будет запущен только один раз с первым id.

Вы можете использовать реактивный оператор, чтобы убедиться, что вы запускаете нужный код каждый раз, когда $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;
})();

Теперь он перезагружает данные, что отлично, но получает предупреждения вроде этого: UnhandledPromiseRejectionWarning: Отказ от необработанного обещания. Эта ошибка возникла либо из-за броска внутри асинхронной функции без блока catch, либо из-за отклонения обещания, которое не было обработано с помощью .catch(). (идентификатор отклонения: 3)

blytung 21.12.2020 09:57

@blytung Это расстраивает. Это могло произойти по разным причинам. Вы можете обернуть все тело реактивного оператора в try/catch и зарегистрировать ошибку, чтобы увидеть, что произошло. try { /* reactive statement body */ } catch (error) { console.info(error); }

Tholle 21.12.2020 18:18

Другие вопросы по теме