Svelte 组件变量未定义，如果处理

问题描述

我正在做一个黑客马拉松项目，我有一个调用常规组件的 SSR 组件。

SSR 向 API 发出请求以获取一些信息并将其传递给常规组件。

在孩子中，我需要格式化一个包含对象数组的道具。

类似于：

<script>
  import { onMount } from "svelte";
  import { isArray } from "lodash";

  import StarReview from "./StarReview/StarReview.svelte";

  export let facility;
  let name,image,location,reviewCount,reviewAvg,distance,units;

  function formatUnits(units) {
    console.log(isArray(units));
    return units.map((item) => {
      console.log("item");
      let [dollars,cents] = item.price.text.toString().split(".");

      let price = {
        dollars,cents: cents || "00",};

      strikeTroughPrice = `$${item.regularPrice.text}`;

      return {
        sizeText,promotion,price,url,strikeTroughPrice,};
    });
  }

  onMount(async () => {
    name = facility.name;
    image = facility.images[0];
    location = `${facility.location.streetAddress},${facility.location.city},${facility.location.state}`;
    distance = facility.distance;
    reviewCount = facility.reviews.count;
    reviewAvg = facility.reviews.average;
    units = await formatUnits(facility.units);
    console.log(units);
  });
</script>

<div class="container is-fluid cont">
  <div class="columns is-centered">
    <div class="column is-10 is-10-tablet is-10-mobile">
      <div class="card">
        <div class="card-content">
          <div class="media">
            <div class="media-left">
              <figure class="image">
                <img src="{image}" alt="Placeholder" />
              </figure>
            </div>
            <div class="media-content">
              <p class="title is-4">{name}</p>
              <div class="columns">
                <div class="column is-narrow-tablet">
                  <span class="subtitle is-6">{location}</span>
                </div>
                <div class="column is-narrow-tablet">
                  <span class="subtitle is-6">
                    {distance} mile{distance !== 1 ? "s" : ""} away
                  </span>
                </div>
              </div>

              <p>
                <a href="#phone">Call Now!</a>
              </p>
              <p>
                <a href="#phone">Get map & hours</a>
              </p>

              <p class="subtitle is-6">
                <StarReview rating="{reviewAvg}" />
                <a href="reviews" class="is-6">
                  {reviewCount} review{reviewCount !== 1 ? "s" : ""}
                </a>
              </p>
            </div>
          </div>
          {units} {#if units} {#each units as unit}
          <div class="content">
            <div class="media">
              <div class="media-left">
                <p class="unit-size has-text-weight-bold">
                  {unit.sizeText} unit
                </p>
                {#if unit.promotion}
                <span class="promo-string"> {unit.promotion} </span>
                {/if}
              </div>
              <div class="unit media-content">
                <p class="price has-text-right">
                  ${unit.price.dollars} <span>.{unit.price.cents}</span>
                </p>
                {#if unit.strikeTroughPrice}
                <p class="striketrough-price has-text-right">
                  {unit.strikeTroughPrice}
                </p>
                {/if}
              </div>
              <div>&gt;</div>
            </div>
          </div>
          {/each} {/if}
        </div>
      </div>
    </div>
  </div>
</div>

最后发生的是函数被调用，但 map 函数只循环遍历第一项并且函数的返回值未定义。

我已经尝试过使用 $: 使用 async/await，但似乎没有任何帮助。

为什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）