Svelte - 상위 구성 요소에서 전달되는 데이터를 기다리는 방법은 무엇입니까?

Svelte - 상위 구성 요소에서 전달되는 데이터를 기다리는 방법은 무엇입니까?

나는 스벨테를 배우고 있고 하나의 JSON API의 데이터를 세 가지 구성요소에 사용하고 싶다. 데이터는 다음과 같습니다:

{
  "stats": {
    "currentYear": {
      "total": 6,
      "success": 6
    },
    "thirty": {
      "total": 30,
      "success": 28
    },
    "hundred": {
      "total": 100,
      "success": 92
    },
    "allTime": {
      "total": 789,
      "success": 728
    }
  },
  "heatmap": {
     ...
  },
  "other": {
     ...
  }
}

나는 비동기 페치를 통해 주 구성 요소에서 데이터를 검색하는데, 이것은 잘 작동한다. 그런 다음 각 개체를 해당 구성 요소에 전달하여 개체를 에, 개체를 에 전달합니다.

내 문제를 설명하자면, 에 각 기간의 백분율 값을 표시하려고 합니다. 예를 들어 다음과 같습니다:

• 현재년도 : 100%
• 지난 30일: 93%
• 최근 100일: 92%
• 올타임: 92%

또한, 각각에 대한 CSS 클래스는 색상을 변경하기 위해 일부 임계값을 기반으로 합니다(x > = 95 : 녹색, 95 > x > = 90 : 황색, x < 90 : 적색).

그래서 아래와 같이 일반 함수로 가지고 싶었던 기본 연산이 필요하다.

객체는 상위 구성요소로부터 전달되며, 블록을 통해 HTML에 값을 표시하는 것만 원했다면, 이것은 잘 작동할 것이다. 그런데 계산을 좀 해보고 싶어서 객체의 데이터를 이용하는 함수를 부르고 싶었는데, 이 함수를 적절한 순간에 어떻게 불러야 할지 모르겠어요. 호출은 너무 이르므로 아직 상위 구성 요소에서 들어오는 데이터가 수신되지 않았습니다.

<script>
    import { onMount } from "svelte"
    
    export let stats

    let currentYearClass, currentYearStat

    const calcPercentage = async (period) => {
        currentYearStat = stats[period].currentYearSuccess * 100 / stats[period].currentYearTotal
        currentYearClass = 'green'
    }

    onMount( async () => {
        calcPercentage('currentYear')
    })
</script>
<div id="stats">
{#await stats}
    <div>Waiting for stats ...</div>
{:then stats}
    <div class="{currentYearClass}" id="currentYear">{currentYearStat}</div>
    ...
    ...
{/await}
</div>

---

이렇게 하는 데는 여러 가지 방법이 있지만, 한 가지 방법은 의 의견을 하나의 논쟁으로 받아들인 후에 반응적으로 부르는 것일 것입니다.

export let stats
let currentYearClass, currentYearStat

const calcPercentage = (stats, period) => {
   currentYearStat = stats[persion}......
   currentYearClass = 'green'
}

$: stats && calcPercentage(stats, 'currentYear')

편집: 일부 설명

원래 솔루션의 첫 번째 문제는 구성 요소에 정확한 데이터가 없으므로 정의되지 않는다는 것입니다.

위의 솔루션은 두 단계로 작동합니다:

$: stats && calcPercentage(stats, 'currentYear')

이 첫 번째 부분은 반응형 문을 정의하며, 정의되지 않거나, 거짓이거나, 0이 아니면 참으로 평가되는지 확인합니다. true이면 함수를 실행합니다.

두 번째 부분은 이전과 동일한 기능으로, 나는 기능이 그러하듯이 엄격하게 필요하지는 않지만, 여기에 논제를 덧붙였는데, 왜냐하면 이전의 실행은 매번 바뀔 때마다 바뀌고 참과 같은 값이기 때문이다.

이 두 개가 있는 상태에서 반응형 문을 마운트하면 정의되지 않아 기능이 실행되지 않습니다. 데이터가 들어오면 재평가가 되고 더 이상 정의되지 않으며 기능이 실행됩니다.

추가의

반응성 진술이 다음과 같은 형태가 될 때:

$: myfunction(myvar)

마운트 중에도 내 var를 변경하기 위해 실행됩니다(존재하지 않는 것에서 정의되지 않은 것으로 변경되는 것을 고려하십시오). 이는 검사를 기능 자체로 이동해야 한다는 것을 의미하며, 일부 시나리오의 경우에는 이것이 실제로 할당의 일부이고 기능 자체가 구성 요소 외부에 정의되는 경우를 예로 들 수 있습니다

import heavyCalc from 'heavy/calc/function`

$: value = heavyCalc(otherValue)

---

이 구성 요소에 어떻게 전달되는지는 보여주지 않았지만, 원래 솔루션에서 두 가지 문제를 추론할 수 있습니다:

1. 그 소품은 바로 전달되지 않기 때문에 도중입니다.
2. 구성 요소가 DOM에 마운트된 경우에만 실행됩니다( 참조). 구성 요소의 수명 동안의 변경 내용이 다시 실행되지 않는 경우.

변경사항을 실행할 방법을 찾고 계십니다. 이 경우 a를 사용해야 합니다:

$: if (stats) calcPercentage('currentYear')

이 반응형 문은 변경사항을 실행합니다.

는 가 .인 경우에만 실행되도록 보장하므로 를 실행하는 동안에는 실행되지 않습니다. 에 설명된 대로 를 사용하여 데이터를 로드한 후에만 구성 요소를 렌더링하는 것이 더 우아하지만 복원력이 떨어집니다.

스벨테 컴파일러는 반응형 문에 직접 나타나는 값만이 의존성이 된다는 것을 알고 있다. 이 경우 -block에서 직접 사용되므로 변경 시 재실행할 수 있습니다. 그런 것이 필요하지 않은 상황에 대한 대안은 에 설명된 바와 같이 매개변수로 사용하는 것입니다.

---

다음을 사용하여 데이터가 로드된 후에만 구성 요소를 렌더링할 것을 제안합니다:

1. 수행할 작업:

   {#await promise}
   
       <div>Loading...<div>
   
   {:then stats}
   
       <Stats {stats} />
   
   {/await}
   

2. 데이터를 사용할 준비가 되어 있습니다.