рендеринг без сбоев ReactJs Ошибка - PullRequest
0 голосов
/ 05 июня 2018

Я использую реагирование для моего проекта.теперь я пытаюсь использовать localStorage в качестве основного хранилища из-за отсутствия соединения с базой данных, кроме algolia.

Но мой код localStorage теперь не прошел другой тест (тест рендеринга и т. д.) и получил "TypeError:Не удается прочитать свойство 'getItem' из неопределенного ", когда я пытался получить доступ к своему локальному хранилищу в этой строке кода:

var collection = JSON.parse (window.localStorage.getItem ('collection'));

Полагаю, это происходит потому, что я пытался создать компонент, но localStorage все еще не определен (или еще не определен)

вот мой код для определения моего localStorage

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
import Header from '../../components/header/header';
import Footer from '../../components/footer/footer';
import RecommendedCategory from '../../components/recommendedCategory/recommendedCategory';
import RecommendedItem from '../../components/recommendedItem/recommendedItem';
import './css/home.css';

class Home extends Component {
    render() {
        var collections, urlCollections;
        if(window.localStorage.collections === undefined || window.localStorage.urlCollections === undefined){
            collections = [];
            urlCollections = [];
        } else {
            collections = JSON.parse(window.localStorage.getItem('collections'));
            urlCollections = JSON.parse(window.localStorage.getItem('urlCollections'));
        }
        window.localStorage.setItem('collections', JSON.stringify(collections));
        window.localStorage.setItem('urlCollections', JSON.stringify(urlCollections));
        return (
            <BrowserRouter>
                <div className="Home">
                    <Header />
                    <div className="containerCategory">
                        <RecommendedCategory />
                        <RecommendedItem />
                    </div>
                    <Footer />
                </div>
            </BrowserRouter>
        );
    }
}

export default Home;

doу вас есть идеи, как получить элемент в localStorage в обязательном порядке тест рендеринга?

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Вы можете устранить ошибку, если ваш браузер не поддерживает localStorage, добавив условие для проверки его доступности в браузере,

render() {
        var collections, urlCollections;
        if(typeof(Storage) !== "undefined"){
          if(window.localStorage.collections === undefined || window.localStorage.urlCollections === undefined){
              collections = [];
              urlCollections = [];
          } else {
              collections = JSON.parse(window.localStorage.getItem('collections'));
              urlCollections = JSON.parse(window.localStorage.getItem('urlCollections'));
          }
          window.localStorage.setItem('collections', JSON.stringify(collections));
          window.localStorage.setItem('urlCollections', JSON.stringify(urlCollections));
        }
        return (
            <BrowserRouter>
                <div className="Home">
                    <Header />
                    <div className="containerCategory">
                        <RecommendedCategory />
                        <RecommendedItem />
                    </div>
                    <Footer />
                </div>
            </BrowserRouter>
        );
    }
0 голосов
/ 05 июня 2018

При запуске модульных тестов в узле с mocha / jest / etc у вас не будет доступных браузерных API (localStorage в вашем случае).

Вам необходимо настроить фиктивные реализации API браузера для соответствующей тестовой среды, которые не охватываются самой средой.

Проверьте этот ответ, чтобы увидеть, как mocking localStorage можетбыть достигнутым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...