渲染而不会崩溃 ReactJs 错误答案

【问题标题】：renders without crashing ReactJs Error渲染而不会崩溃 ReactJs 错误
【发布时间】：2018-06-05 10:49:20
【问题描述】：

我一直在为我的项目使用 react。现在我正在尝试使用 localStorage 作为我的主存储，因为除了 algolia 之外没有任何数据库连接。

但是当我尝试在这行代码中访问我的本地存储时，我的 localStorage 代码现在未通过其他测试（渲染测试等）并得到“TypeError: Cannot read property 'getItem' of undefined”：

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

我猜这是因为我试图创建一个组件，但 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;

您知道如何在不通过渲染测试的情况下在 localStorage 中获取项目吗？

【问题讨论】：

你在运行单元测试吗？（没有真正的浏览器）
这个question的副本

标签： reactjs local-storage

【解决方案1】：

使用 mocha/jest/etc 在节点中运行单元测试时，您将无法使用浏览器 API（在您的情况下为 localStorage）。

您必须为各自的测试环境设置模拟浏览器 API 实现，环境本身并未涵盖这些实现。

查看此答案以了解mocking localStorage 可以实现。

【讨论】：

【解决方案2】：

如果您的浏览器不支持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>
        );
    }

【讨论】：