Svelte动态页面切换时子组件获取的数据未更新求助

问题根源 #

1. 非响应式变量：SectionID和SectionApiURL是在组件初始化时赋值的，未声明为响应式，父组件传递的data更新时，这两个值不会同步变化。
2. 仅挂载时请求：onMount只在组件首次挂载时执行一次，而Svelte的#each会复用已渲染的组件，切换动态页面时组件不会重新挂载，因此不会重新发起API请求。

修复后的PageSection.svelte代码 #

import { ApiUrl } from '../stores.js';

export let data;

// 声明响应式变量，随data变化自动更新
$: SectionID = data.id;
$: SectionApiURL = `${ApiUrl}/api/sections/${SectionID}?populate=article`; // 修复URL缺少的?符号
let sectionDetails;

// 抽离请求逻辑为函数
async function fetchSectionDetails() {
  try {
    const response = await fetch(SectionApiURL);
    if (!response.ok) throw new Error('Network response was not ok.');
    sectionDetails = await response.json();
  } catch (error) {
    console.error('There was a problem fetching the section data:', error);
  }
}

// 响应式触发请求：初始化时执行，且SectionApiURL变化时重新执行
$: fetchSectionDetails();

额外说明 #

• 移除了onMount，因为响应式声明$: fetchSectionDetails()会在组件初始化时自动执行一次，同时在SectionApiURL变化时重新执行，覆盖了onMount的场景。
• 修复了API URL中缺失的?符号，否则populate=article会被当作路径的一部分，导致请求参数无效。
• 使用async/await简化Promise链式调用，让代码更易读。

内容的提问来源于stack exchange，提问作者John Watson