Блог

Я столкнулся с проблемой, в которой я не уверен, является ли это результатом меня или браузера 🙂 Я использую Sapper уже несколько месяцев, и мне это нравится. Все работает, когда я просматриваю его в браузере Chrome, но браузеры Edge / Opera / Firefox / Brave выдают ошибку, описанную ниже.

У меня есть объект arrays (я могу опубликовать его, но это не имеет значения), который я храню в 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 выполняет итерацию правильно, но другие браузеры выдают мне сообщение об ошибке не удается прочитать значение preporty ‘length’ null?

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

И что вы сказали?

 Cannot read property 'length' of null
 

Хм.

Вы уверены, что объект сохранен, localStorage прежде чем пытаться его прочитать?