web-dev-qa-db-ja.com

ReactJSおよびNextJSコンストラクターの基準エラーの取得：LocalStorageは定義されていません

私は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)
            })
    }
 _

また、Error LocalStorageが定義されていません

javascriptnode.jsreactjsnext.js
1
Toni Suwendi

constructorcomponentWillMountライフサイクルのフックであると、サーバーはまだコンポーネントをレンダリングしています。一方、 LocalStorage ブラウザのウィンドウグローバルの一部として存在するため、コンポーネントがレンダリングされたときにのみ使用できます。したがって、componentDidMountライフサイクルフックのローカルストレージだけにアクセスできます。コンストラクターで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
  });
}
 _
5
wentjun

みんなが述べたように、NextJSはクライアントとサーバーの両方で実行されます。サーバー上ではlocalStorageがundefined errorです。

ただし、localStorageにアクセスする前に、NEXTJSがサーバー上で実行されているかどうかを確認することです。 NS

const ISSERVER = typeof window === "undefined";

if(!ISSERVER) {
 // Access localStorage
 ...localStorage.get...
}
 _
4
SILENT