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

Question

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

我有一个数组对象（我可以发布它，但它无关紧要），我存储在 localStorage 中并将它分配给一个变量（storeitems），该变量位于一个 sapper 商店中。 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 可以正确迭代，但其他浏览器却给我错误 cannot read preporty 'length' of null？

Answer 1

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

你说呢？

Cannot read property 'length' of null

嗯。

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