将本地存储添加到存储后键入错误答案

【问题标题】：Type Error after adding localstorage to store将本地存储添加到存储后键入错误
【发布时间】：2021-11-17 18:33:20
【问题描述】：

在初始页面加载时出现类型错误：

500
$rating.join 不是函数
TypeError: $rating.join 不是函数

这会在页面更改后停止，例如，转到关于页面，然后返回将正确加载的索引页面。

我认为这是操作顺序问题？由 onMount 修复？只是不知道如何实现它。

// Store
export const rating = writable(browser && (JSON.parse(sessionStorage.getItem("rating")) || []))
rating.subscribe((val) => browser && sessionStorage.setItem("rating", JSON.stringify(val)))

// Filters Component
<script>
  import {rating} from "../stores/items";
  const ratings = [1, 2, 3, 4, 5];
</script>

  <div class="flex justify-center">
    <!-- Ratings Filter -->
    <div class="multiselect">
      <div class="selectBox rounded-sm shadow2 m-1 px-1" on:click={multiselect}>
        <select>
          <option
            >{#if $rating.length === 0}
              Rating:
            {:else}
              {$rating.join(", ")}
            {/if}</option
          >
        </select>
      <div class="overSelect dropdown" />
    </div>
    <div class="checkboxes" id="ratingDropdown">
      {#each ratings as ratings}
      <div class="flex">
        <input
          type="checkbox"
          id={ratings}
          name="typeValues"
          bind:group={$rating}
          value={ratings}
          class="dropdown"
        />
        <label for={ratings} class="dropdown">{ratings}</label>
      </div>
      {/each}
    </div>
  </div>

任何帮助将不胜感激，谢谢。

【问题讨论】：

500 错误是服务器错误。错误在您的服务器代码中。 PHP 变量 $rating 似乎不存在或不是正确的数据类型。

标签： javascript svelte sveltekit

【解决方案1】：

我认为你的括号在最初的调用中是错误的

const rating = writable(
   browser && 
   (JSON.parse(sessionStorage.getItem("rating")) || [])
)

这意味着在 SSR 期间评级将是false

你可能想改变它们：

const rating = writable(
   (browser && JSON.parse(sessionStorage.getItem("rating"))) || 
   []
)

这样当 browser 为 false 时，你会得到一个空数组。

（尴尬的格式是尝试让它可见）

【讨论】：

这已解决，谢谢！
为了澄清以后遇到同样问题的人，它最终看起来像这样：export const rating = writable((browser && JSON.parse(sessionStorage.getItem("rating"))) | | []))

【解决方案2】：

console.log ($rating) 看看你得到了什么。

【讨论】：