React: useCallback gibt undefined zurück, wenn die Komponente serverseitig gerendert wird

Erstellt am 15. Nov. 2018  ·  4Kommentare  ·  Quelle: facebook/react

Möchten Sie eine Funktion anfordern oder einen Fehler melden?

Fehler.

Wie ist das aktuelle Verhalten?

React.useCallback gibt undefined wenn die Komponente serverseitig gerendert wird.

Wenn das aktuelle Verhalten ein Fehler ist, stellen Sie bitte die Schritte zur Reproduktion und wenn möglich eine minimale Demo des Problems bereit. Fügen Sie den Link zu Ihrem JSFiddle (https://jsfiddle.net/Luktwrdm/) oder CodeSandbox (https://codesandbox.io/s/new) Beispiel unten ein:

Dieser Fehler kann reproduziert werden, indem eine React-Komponente mit einem useCallback . Das Protokollieren des Rückgabewerts auf dem Server ergibt undefined während die Funktion im Browser ordnungsgemäß zurückgegeben wird.

Sie können diesen Fehler in diesem CodeSandbox beachten: https://codesandbox.io/s/r557kww6wn Die Anwendung ordnungsgemäß in einen String Fehler gemacht wird , an der Konsole suchen, werden Sie sehen , dass der Rückgabewert von useCallback ist undefined .

Hier ist genau dieselbe Anwendung, die jedoch auf dem Client gerendert wurde: https://codesandbox.io/s/xvwv797pxz Die Funktion wird ordnungsgemäß in der Konsole protokolliert.

Was ist das erwartete Verhalten?

React.useCallback sollte den auswendig gelernten Rückruf zurückgeben, nicht undefined .

Welche React-Versionen und welche Browser/Betriebssysteme sind von diesem Problem betroffen?

  • reagieren: 16.7.0-alpha.2
  • Reaktionsdom: 16.7.0-alpha.2
Hooks Bug

Hilfreichster Kommentar

Ich glaube, das ist ein Fehler; dieser Codekommentar ist falsch. Nach meinem Verständnis ist es richtig, useCallback für Renderphasen-Callbacks zu verwenden.

Alle 4 Kommentare

Dies ist beabsichtigtes Verhalten.

Rückrufe werden in der Serverumgebung nicht ausgeführt.

Ich vermute, dass der Grund dafür ist, dass React sie nicht wirklich im Auge behalten muss, da Rückrufe für die Verwendung mit Ereignishandlern wie onClick , die während SSR keine Bedeutung haben, um Ressourcen freizugeben, die verwendet würden unnötig, indem Sie Haken verfolgen, die nie verwendet würden.

Keine Sorge, beim Rehydrieren werden die Rückrufe da sein.

Aber darf ich fragen, was du genau vorhast?

Danke @arianon 👌 Ich redux-react-hook gefolgt, useCallback mit ihrem useMappedState zu verwenden . Konzeptionell ist die Funktion, die ich auswendig lerne, nicht wirklich ein Rückruf. Darauf habe ich zunächst nicht geachtet, da der Begriff in den unterschiedlichsten Kontexten verwendet wird. Außerdem wird in der Dokumentation Folgendes erwähnt:

useCallback(fn, inputs) entspricht useMemo(() => fn, inputs) .

Ich werde ein Problem im Docs-Repository öffnen, um ein Update vorzuschlagen 😉 Nochmals vielen Dank!

Ich glaube, das ist ein Fehler; dieser Codekommentar ist falsch. Nach meinem Verständnis ist es richtig, useCallback für Renderphasen-Callbacks zu verwenden.

AFAICT die einzigen Dinge, die nicht serverseitig ausgeführt werden sollten, sind die Effekte und die ref-Attributinitialisierung. Ein funktionierender useCallback ist zum Beispiel wichtig für das Render-Prop-HOC-Muster, das noch lange im Ökosystem sein wird.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen