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

Question

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

500
$rating.join 不是函数
类型错误：$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>

如有任何帮助，我们将不胜感激。

Answer 1

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

Answer 2

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

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

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

您可能想移动它们：

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

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

（笨拙的格式是试图让发生的事情可见）

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

Type Error after adding localstorage to store

javascript

svelte

sveltekit