Beim Reactjs- und Nextjs-Konstruktor wird ein Referenzfehler angezeigt: Localstorage ist nicht definiert

Lesezeit: 4 Minuten

Benutzer-Avatar
Toni Suwendi

Ich mache System-Jsonwebtoken in Reactjs und verwende Nextjs. Ich finde ein Problem, wenn ich den Code im Browser ausführe, bei dem localStorage nicht definiert ist.

das ist mein Code in der Datei 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)
            })
    }

und Fehler anzeigen localStorage ist nicht definiert

  • Verwenden Sie window.localStorage

    – Avck

    31. Dezember 2019 um 6:28 Uhr

  • und dann ist das Fenster nicht definiert

    – Toni Suwendi

    31. Dezember 2019 um 6:30 Uhr

  • kannst du das Snippet mit Fehler posten. Fenster sollte im globalen Namensraum verfügbar sein

    – Avck

    31. Dezember 2019 um 6:31 Uhr

  • Als nächstes wird das Fensterobjekt überall außer Kraft gesetzt, außer dass die Komponente gemountet wurde. : stackoverflow.com/a/55151122/1643143

    – Avck

    31. Dezember 2019 um 6:34 Uhr

  • Stimmen Sie ab, um dies erneut zu öffnen, da die Frage mit weiteren Details bearbeitet wurde.

    – gingjun

    21. Juni 2020 um 10:44 Uhr

Wie alle bereits erwähnt haben, läuft NextJS sowohl auf dem Client als auch auf dem Server. Auf dem Server gibt es keine localStoragedaher die undefined Error.

Eine alternative Lösung besteht jedoch darin, zu prüfen, ob nextjs auf dem Server ausgeführt wird, bevor auf die zugegriffen wird localStorage. dh

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

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

Auf der constructor ebenso gut wie componentWillMount Lebenszyklus-Hooks, rendert der Server die Komponente immer noch. Auf der anderen Seite, lokaler Speicher existiert als Teil des globalen Fensters des Browsers, daher können Sie es nur verwenden, wenn die Komponente gerendert wird. Daher können Sie nur auf localStorage zugreifen componentDidMount Lebenszyklushaken. Anstatt localStorage für den Konstruktor aufzurufen, können Sie einen leeren Zustand definieren und den Zustand aktualisieren componentDidMount wann Sie anfangen können, localStorage aufzurufen.

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
  });
}

Benutzer-Avatar
Ifaruki

Ich habe nextjs nie berührt, aber ich denke, es entspricht Nuxt.js. Es wird also serverseitig gerendert, während Sie versuchen, auf der Clientseite auf den lokalen Speicher zuzugreifen.

Sie müssen verwenden componentDidMount() dafür. Hier ein Beispiel

componentDidMount(){
   localStorage.setItem('myCat', 'Tom');
   alert("Tom is in the localStorage");
}

BEARBEITEN:

Ansonsten könntest du es mit versuchen process.browser

if (process.browser) {
   localStorage.setItem("token", token);
}

  • ich will kein setItem, aber ich will getItem

    – Toni Suwendi

    31. Dezember 2019 um 6:35 Uhr

Zusätzlich zu dem, was @SILENT gesagt hat, funktioniert dies für mich

 React.useEffect(() => {
    if (localStorage) {
      const getLocalState = localStorage.getItem("headless");
      console.log("LocalState: ", getLocalState)
    }
  }, []);

Window-Objekt und Localstorage sind nicht verfügbar, wenn Nextjs erstellt wird. Sie müssen also überprüfen, ob der Code im Browser ausgeführt wird. Wenn Sie React-Hooks ausführen, müssen Sie dies nicht tun, da Hooks immer browserseitig in React ausgeführt werden.

Fügen Sie einfach diese beiden Hilfsfunktionen zu Ihrem nextjs-Projekt hinzu.

export const isBrowser = (): boolean => {
  return typeof window !== 'undefined'
}

export const nextLocalStorage = (): Storage | void => {
  if (isBrowser()) {
    return window.localStorage
  }
}

dann können Sie es so in Ihrem Code verwenden

nextLocalStorage()?.setItem('user', JSON.stringify(user))

Benutzer-Avatar
Ali Askari

Ich musste ein Token auslesen localStorage in NextJS und fügen Sie es einem Axios-Instanz-Header hinzu. Es war außerhalb der Komponente, also habe ich die IIFE-Praxis verwendet, um sicherzustellen, dass ich im Client bin:

(function(){
  if(typeof window !== "undefined"){
    AxiosInstance.defaults.headers.common.Authorization = `Bearer ${localStorage.getItem('TOKEN_KEY')}`
  }
})()

Benutzer-Avatar
Azad Ansari

Ich habe eine Funktion erstellt getLocalStorageItem und rief diese an useEffect mit dem erforderlichen Schlüsselnamen. Nachdem Sie den Wert von localStorage erhalten haben, speichern Sie ihn in einem Zustand (z. B. aktueller Benutzer) und verwenden Sie ihn in initialState.

 const [currentUser, setCurrentUser] = useState({});

  const getLocalStorageItem = (key) => {
    return typeof window !== undefined
      ? window.localStorage.getItem(key)
      : null;
  };

  useEffect(() => {
    setCurrentUser({
      token: getLocalStorageItem("token"),
      refreshToken: getLocalStorageItem("refreshToken"),
    });
  }, []);

  const initialState = {
    auth: {
      isLoggedIn: true,
      currentUser: currentUser,
    },
  };

1016020cookie-checkBeim Reactjs- und Nextjs-Konstruktor wird ein Referenzfehler angezeigt: Localstorage ist nicht definiert

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy