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

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

ReferenceError:未定义localStorage

请帮助解决这个问题

My

package.json

：

{


 "main": "server.js",
 "scripts": {
  "start-dev": "NODE_ENV=development webpack -w & NODE_ENV=development node server.js",
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
  "axios": "^0.18.0",
  "express": "^4.15.3",
  "firebase": "^4.12.1",
  "html2canvas": "^1.0.0-alpha.12",
  "react": "^16.2.0",
  "react-adsense": "0.0.5",
  "react-dom": "^16.2.0",
  "react-facebook-login": "^4.0.1",
  "react-google-login": "^3.2.1",
  "react-meta-tags": "^0.3.0",
  "react-router-dom": "^4.2.2",
  "react-router-match-as-promised": "^1.0.5",
  "react-scripts": "1.1.1",
  "react-share": "^2.1.1",
  "react-slick": "^0.22.3"
 },
 "devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react-app": "^3.1.2",
  "babel-preset-stage-0": "^6.24.1",
  "css-loader": "^0.28.4",
  "extract-text-webpack-plugin": "^2.1.2",
  "file-loader": "^0.11.2",
  "postcss-loader": "^2.0.6",
  "webpack": "^3.1.0",
  "webpack-node-externals": "^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'）。然后（响应=>{
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；
返回(
{this.state.metaTitle}

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

在服务器和客户端（浏览器）上运行的JavaScript代码中，通常使用检查是否已定义的

if

子句进行防范。“窗口”是浏览器为浏览器提供的所有API提供的根对象

例如：

if (typeof window !== 'undefined') {
    console.log('we are running on the client')
} else {
    console.log('we are running on the server');
}

在您的情况下，您希望在这样一个

if

子句中调用

localStorage

，例如：

if (typeof window !== 'undefined') {
    localStorage.setItem('myCat', 'Tom');
}

您可以添加到您的应用程序中。例如，在

index.js

中的某个位置：

if (!window) {
    require('localstorage-polyfill');
}

---

这是oneliner为我做的：

const checkout = typeof window !== 'undefined' ? localStorage.getItem('checkout') : null

---

所以你想在服务器端使用<代码> LoalSturt，对吗？请检查我的PACKAG.JSON文件，让我知道你需要什么样的SEEKE，亚历克斯你是对的。你的问题中的代码不使用LoalStand任何地方。它可能在你正在导入的一个包中使用，可能会对AdSense作出反应。但是你没有包含PAR。你可以指导我如何在我的应用程序中使用localstorage吗？或者如果你有任何有用的链接，请发送任何有用的链接。我已经这样做了，或者尝试了：无论你在哪里使用local storage，请检查它是否真的可用，如我在代码示例中所示的if子句。我已经使用了你的代码，但仍然无法使用ng相同的错误。正如@PatrickHund所说，您可能希望检查依赖项的代码/文档，以检查哪个包正在使用

localStorage

，并将其替换为SSR友好的包。使用此代码后，我的整个代码都已中断。--------------------出现以下错误。警告：无效的DOM属性

类

。您知道吗意思是

className

？不清楚它是如何链接的，但是是的，react使用

className

属性而不是

class

。我已经将这个包用于元标记。我想让它对seo友好。这已经是不同的问题了，所以我假设您请求帮助的那个问题已经解决了。对于您请求的上一个问题-j必须将

class

替换为

className

，这应该会有所帮助。但是，我要指出的是，将所有内容移动到服务器端渲染不是一项简单的任务，您可能还会面临其他问题。我建议您为此提出新的具体问题（当然，如果以前没有人问过这些问题的话）.我不认为这里有人能用一个答案解决你应用程序中的所有问题。

const checkout = typeof window !== 'undefined' ? localStorage.getItem('checkout') : null