web-dev-qa-db-de.com

Fehler `Fenster nicht definiert` in Node.js

Ich weiß, dass window in Node.js nicht vorhanden ist, aber ich verwende React und denselben Code auf Client und Server. Jede Methode, die ich verwende, um zu überprüfen, ob window existiert, vernetzt mich:

Nicht abgerufener ReferenceError: Fenster ist nicht definiert

Wie kann ich damit umgehen, dass ich window && window.scroll(0, 0) nicht kann?

13
Sawtaytoes

Sawtaytoes hat es bekommen. Ich würde den Code ausführen, den Sie in componentDidMount () haben, und ihn mit folgenden Elementen umgeben:

if (typeof(window) !== 'undefined') {
  // code here
}

Wenn das Fensterobjekt zu dem Zeitpunkt, zu dem React die Komponente rendert, noch nicht erstellt wird, können Sie Ihren Code immer einen Sekundenbruchteil ausführen, nachdem die Komponente gerendert wurde (und das Fensterobjekt wurde bis dahin definitiv erstellt), sodass der Benutzer dies nicht tun kann Nenne den Unterschied.

if (typeof(window) !== 'undefined') {
    var timer = setTimeout(function() {
        // code here
    }, 200);
}

Ich würde davon abraten, state in setTimeout zu setzen.

17
Jeff Diederiks

Damit wird das Problem für Sie gelöst:

typeof(window) === 'undefined'

Auch wenn eine Variable nicht definiert ist, können Sie mit typeof() prüfen.

4
Sawtaytoes

Diese Art von Code sollte nicht einmal auf dem Server ausgeführt werden. Er sollte sich innerhalb eines componentDidMount ( siehe doc ) - Hooks befinden, der nur clientseitig aufgerufen wird. Dies liegt daran, dass es keinen Sinn macht, die Seite des Window-Servers zu scrollen.

Wenn Sie jedoch in einem Teil Ihres Codes, der wirklich sowohl Client als auch Server ausführt, auf window verweisen müssen, verwenden Sie stattdessen global (was den globalen Gültigkeitsbereich darstellt - z. B. window auf dem Client).

2
topheman

Verschieben Sie den window und den zugehörigen Code in den Lebenszyklus-Hook mounted(). Dies liegt daran, dass mounted() hook nur auf der Clientseite aufgerufen wird und window dort verfügbar ist.

0
JustAnotherGirl
<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>

wenn Sie eine neue Seite in der React JS-App oben öffnen möchten, verwenden Sie diesen Code in router.js

0
Andrei Fyodorov

Dies ist zwar etwas älter, aber für ES6-Stilreaktionskomponentenklassen können Sie diesen von mir erstellten Klassendekorator als Drop-In-Lösung zum Definieren von Komponenten verwenden, die nur auf der Clientseite dargestellt werden sollen. Ich mag es besser, als überall Fensterchecks abzulegen.

import { clientOnly } from 'client-component';

@clientOnly
class ComponentThatAccessesWindowThatIsNotSafeForServerRendering extends Component {
    render() {
        const currentLocation = window.location;
        return (
            <div>{currentLocation}</div>
        )
    };
}

https://github.com/peterlazzarino/client-component

0
Peter Lazzarino