在reactjs和nextjs构造函数中获取参考错误:未定义localstorage

时间:2019-12-31 06:16:25

标签: javascript node.js reactjs next.js

我在reactjs中创建系统jsonwebtoken并使用nextjs。在未定义localStorage的浏览器中运行代码时,我发现问题。

这是我在AuthStudentContext.js文件中的代码

import React from 'react'
import axios from 'axios'

const axiosReq = axios.create()
const AuthStudentContext = React.createContext()

export class AuthStudentContextProvider extends React.Component {

    constructor() {
        super()
        this.state = {
            students: [],
            student: localStorage.getItem('student') || {},
            token: localStorage.getItem('token') || "",
            isLoggedIn: (localStorage.getItem('student' == null)) ? false : true
        }
    }

    login = (credentials) => {
        return axiosReq.post("http://localhost:4000/api/login", credentials)
            .then(response => {
                const { token } = response.data
                localStorage.setItem("token", token)

                this.setState({
                    token,
                    isLoggedIn: true
                })

                return console.log(response)
            })
    }

并显示错误localStorage未定义

2 个答案:

答案 0 :(得分:0)

我从没碰过nextjs,但我想它相当于Nuxt.js。因此,当您尝试在客户端上访问本地存储时,服务器端也会进行渲染。

您将需要使用componentDidMount(){ localStorage.setItem('myCat', 'Tom'); alert("Tom is in the localStorage"); } 。这是一个例子

process.browser

编辑:

否则,您可以尝试使用if (process.browser) { localStorage.setItem("token", token); }

contains(body('List_tables')['value'],item())

答案 1 :(得分:0)

constructorcomponentWillMount生命周期挂钩上,服务器仍在呈现组件。另一方面,localStorage作为浏览器的Window全局的一部分存在,因此只能在呈现组件时使用它。因此,您只能在componentDidMount生命周期挂钩上访问localStorage。除了可以在构造函数上调用localStorage之外,您还可以定义一个空状态,并在可以开始调用localStorage时更新componentDidMount上的状态。

constructor() { 
  super()
  this.state = {
    students: [],
    student: undefined
    token: undefined,
    isLoggedIn: undefined
  };
}

componentDidMount() {
  this.login();
  this.setState({
    student: localStorage.getItem('student') || {},
    token: localStorage.getItem('token') || "",
    isLoggedIn: (localStorage.getItem('student' == null)) ? false : true
  });
}
豫ICP备18024241号-1