Я создаю сайт с помощью 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.
Вы можете использовать реактивный оператор, чтобы убедиться, что вы запускаете нужный код каждый раз, когда $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;
})();
@blytung Это расстраивает. Это могло произойти по разным причинам. Вы можете обернуть все тело реактивного оператора в try/catch и зарегистрировать ошибку, чтобы увидеть, что произошло. try { /* reactive statement body */ } catch (error) { console.info(error); }
Теперь он перезагружает данные, что отлично, но получает предупреждения вроде этого: UnhandledPromiseRejectionWarning: Отказ от необработанного обещания. Эта ошибка возникла либо из-за броска внутри асинхронной функции без блока catch, либо из-за отклонения обещания, которое не было обработано с помощью .catch(). (идентификатор отклонения: 3)