浏览器在 svelte-sapper 组件中显示 {#each} 块的问题

问题描述

我遇到了一个问题，我不确定是我还是浏览器造成的 :) 我已经使用 Sapper 几个月了并且喜欢它。当我在 Chrome 浏览器中查看它时一切正常，但 Edge/Opera/Firefox/Brave 浏览器给我一个错误解释如下。

我有一个数组对象（我可以发布它，但它无关紧要），我将它存储在 localStorage 中并将其分配给一个变量 (storeitems)，该变量位于工兵商店中。 menustore.js 是基本的

import { writable } from 'svelte/store';
let menustore;
export default menustore = writable();

在我迭代对象数组的组件中，我从 localStorage 获取对象数组并分配/更新我的商店并分配我的组件局部变量 (storeitems)。

<script>

  import { onMount } from 'svelte';      

  import menustore from './menustore.js'
  let storeitems = [];
     
  onMount(async () => {
  let getstorage = JSON.parse(localStorage.getItem('menu'));
  menustore.set(getstorage)
  menustore.subscribe(val=>{
  storeitems = val
  })
  }) 

</script>

在我的 html 中，我使用每个块来迭代我的数组并显示它：

   line 92 -->   {#each browseritems as category}
                   <li>
                      Category Name : {category.category}
                   </li>
                 {/each}

当我进入任何浏览器时，唯一显示页面的是 Chrome 浏览器，其他所有浏览器页面都是空/空白/白色（只有顶部的菜单，如果我导航到其他页面将显示相应的页面）所以应用程序正在运行，但如果我通过迭代进入页面，什么都没有......在开发工具中，我看到错误：

browser.svelte:92 Uncaught (in promise) TypeError: Cannot read property 'length' of null
    at Object.update [as p] (browser.svelte:92)
    at update (index.mjs:656)
    at flush (index.mjs:628)

如您所见，storeitems 被初始化为一个数组（让 storeitems = []），Chrome 通过正确显示类别来显示迭代的结果。对象数组和迭代在 Chrome 中有效（正确显示），但在其他浏览器中无效（我的观点是：它不是对象）

知道为什么吗？为什么 chrome 迭代正确，但其他浏览器给我错误无法读取 null 的 preporty 'length'？

解决方法

localStorage.getItem('menu') // => null
JSON.parse(localStorage.getItem('menu')) // => null

然后，你说？

Cannot read property 'length' of null

嗯。

在您尝试读取对象之前，您确定该对象存储在 localStorage 中吗？