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

Question

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

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

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

在我迭代对象数组的组件中，我从 localStorage 和 assign/update 我的商店获取对象数组并分配我的组件局部变量 (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 浏览器，所有其他浏览器页面都是 empty/blank/white（如果我导航到其他页面，只是顶部的菜单将显示相应的页面）所以应用程序是运行但是如果我通过迭代转到页面，什么都没有...在开发工具中，我看到错误：

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 中吗？

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

browser displaying issue with {#each} block in svelte-sapper component

svelte

sapper