反应-显示“未定义本地存储”错误

我试图使我的网站搜索引擎优化与元标签友好。
我正在应用程序中实现服务器端渲染。在此之后,我得到以下错误:

ReferenceError:未定义localStorage

请帮助解决这个问题

Mypackage.json

{
“main”:“server.js”,
“脚本”:{
“启动开发”:“NODE_ENV=development webpack-w&NODE_ENV=development NODE server.js”,
“测试”:“echo”错误:未指定测试\“退出1”
},
“关键词”:[],
“作者”:“作者”,
“许可证”:“ISC”,
“依赖项”:{
“axios”:“^0.18.0”,
“快车”:“^4.15.3”,
“firebase”:“^4.12.1”,
“html2canvas”:“^1.0.0-alpha.12”,
“反应”:“^16.2.0”,
“react adsense”:“0.0.5”,
“react dom”:“^16.2.0”,
“反应facebook登录”:“^4.0.1”,
“反应谷歌登录”:“^3.2.1”,
“反应元标记”:“^0.3.0”,
“反应路由器dom”:“^4.2.2”,
“按承诺响应路由器匹配”:“^1.0.5”,
“反应脚本”:“1.1.1”,
“反应共享”:“^2.1.1”,
“反应平滑”:“^0.22.3”
},
“依赖性”:{
“自动刷新器”:“^7.1.2”,
“巴别塔核心”:“^6.25.0”,
“巴别塔加载器”:“^7.1.1”,
“babel-preset-es2015”:“^6.24.1”,
“巴别塔预设反应应用程序”:“^3.1.2”,
“babel-preset-stage-0”:“^6.24.1”,
“css加载器”:“^0.28.4”,
“提取文本网页包插件”:“^2.1.2”,
“文件加载器”:“^0.11.2”,
“邮政编码加载器”:“^2.0.6”,
“网页包”:“^3.1.0”,
“网页包节点外部”:“^1.7.2”
}
}

所有页面中常用的元标记。
Home.js

<代码>
从“React”导入React,{Component};
从“../common”导入axinst;
从“../common/TabBox”导入{TabBox,TabBox2,TabBox3};
从“../common/Ads”导入广告;
从“../common/SubscribeFrm”导入SubscribeFrm;
从“反应元标记”导入元标记;
从“react AdSense”导入AdSense;
从“../common/Loader”导入加载程序;
类Home扩展组件{
建造师(道具){
超级(道具);
}
状态={
标题:[],
其他运动:[],
wizztalk:[],
体育:[],
iProgress:“”,
activeCat:“”,
元标题:“”,
metaDesc:“”,
元键:“”
}
componentDidMount(){
//axinst.get(“/home”)
this.setState({isProgress:true});
获取('/home')。然后(响应=&gt{
this.setState({isProgress:false});
const header=response.data.data.header;
const sports=response.data.data.sports;
const otherSports=response.data.data.otherSports;
const wizztalk=response.data.data.wizztalk;
常量metaTitle=response.data.data.metaTitle;
const metaDesc=response.data.data.metaDesc;
常量metaKey=response.data.data.metaKeyword;
this.setState({header});
这个.setState({sports});
this.setState({otherSports})
this.setState({wizztalk});
this.setState({metaTitle});
this.setState({metaDesc});
this.setState({metaKey});
}).catch(函数(错误){
//console.log(错误);
//console.log('error');
});
}
render(){
const hD=this.state.header;
const sport=this.state.sports;
返回(
<div id=“maincontent”>
<元标记>
<title>{this.state.metaTitle}</title>
<meta name=“title”内容={this.state.metaTitle}/>
<meta name=“keywords”内容={this.state.metaKeyword}/>
<meta name=“description”content={this.state.metaDesc}/>
<meta name=“og:description”content={this.state.metaDesc}/>
<meta name=“og:title”内容={this.state.metaTitle}/>
<meta name=“og:image”content={process.env.PUBLIC_URL+”/images/logo.png“}/>
</MetaTags>
</code>

在服务器上渲染时,您没有浏览器,因此无法访问浏览器提供的所有API,包括localStorage

在服务器和客户端(浏览器)上运行的JavaScript代码中,通常使用检查窗口是否已定义的if子句进行防范。“window”是浏览器为浏览器提供的所有API提供的根对象

例如:

if(窗口类型!==“未定义”){
log('我们正在客户端上运行')
}否则{
log('我们正在服务器上运行');
}

在您的情况下,您希望在这样一个if子句中调用localStorage,例如:

if(窗口类型!==“未定义”){
setItem('myCat','Tom');
}

发表评论