子组件中的获取数据不会在页面更改时更新

Question

Sveltekit 3 的新手，拔掉我的头发。我错过了一些东西！

我有一个页面：

“src/routes/[pageid]/page.js” “src/routes/[pageid]/+page.svelte”

page.js 从 api 获取数据并在 +page.svelte 页面中正确显示。

在 side +page.svelte 我有一个组件：

“src/components/pagesection.svelte”

“[pageid]/+page.svelte”页面循环遍历该 pagesection 组件并传递一个 {section} 参数。

当我更改页面（动态）时。 {section} 不变。

这是 +page.svelte 脚本：

`从'../../components/PageSection.svelte'导入PageSection； 导出让数据； $: ({pageData} = 数据);

{#if pageData}

<h1>{pageData[0].attributes.Title}</h1>

{#each pageData[0].attributes.sections.data as section}

<!-- this updates here -->

  <h4>Section ID: {section.id}</h4>

  <!-- but not in here-->
   <PageSection data={section} />

{/each}

{/if}`

在我的 PageSection 组件中：

`// data is not reacting here! aaaagghhhh!

import { onMount } from 'svelte';
import {ApiUrl} from '../stores.js';
export let data;

let SectionID = data.id;
const SectionApiURL = `${ApiUrl}/api/sections/${SectionID}?populate=article`;
let sectionDetails;

onMount(() => {

fetch(SectionApiURL)
.then(response => {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error('Network response was not ok.');
  }
})
.then(data => {
    sectionDetails = data;
})
.catch(error => {
  console.error('There was a problem fetching the page data:', error);
});
});`

任何帮助将不胜感激。这似乎是任何网站都应该做的一件基本事情，但我花了几个小时试图找出如何让页面信息在组件内部发生变化。

提前谢谢你

Answer 1

你的问题是，在

PageSection

组件内部，你只在组件最初安装时获取部分详细信息，而你真正想做的是在

data

道具更新时获取部分详细信息。

您可以轻松解决此问题（同时，借此机会切换到更现代的 async/await 语法）：

import { ApiUrl } from '../stores.js';
export let data;

$: sectionDetails = updateSection(data) // will run whenever data updates

async function updateSection(section) {
  try {
    const response = await fetch(`${ApiUrl}/api/sections/${section.id}?populate=article`);
    if (!response.ok) {
      throw new Error('Network response was not ok.');
    }
    return response.json();
  } catch (error) {
    console.error('There was a problem fetching the page data:', error);
  }
}