React: Warnung, wenn eine gespeicherte Komponente sowohl Hooks als auch Suspense verwendet

Erstellt am 7. Feb. 2019 · 4Kommentare · Quelle: facebook/react

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

Fehler

Wie ist das aktuelle Verhalten?

In der Konsole wird eine Warnung für eine Komponente angezeigt, bei der alle folgenden Bedingungen erfüllt sind:

Es wird mit React.memo gespeichert
Es werden Haken verwendet
es verwendet Spannung (es wird ein Versprechen geworfen).

Text dieser Warnung: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

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

https://codesandbox.io/s/71lr16j491

Was ist das erwartete Verhalten?

Es sollte keine Warnung angezeigt werden, da die Regeln für Hooks eingehalten werden. Außerdem sollte das Verhalten konsistent sein, unabhängig davon, ob React.memo verwendet wird oder nicht.

Welche Versionen von React und welcher Browser / welches Betriebssystem sind von diesem Problem betroffen?

Reaktion 16.8.1

Hooks Bug

Quelle

trojanowski

👍3

Hilfreichster Kommentar

Behoben in 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl

gaearon am 14. Feb. 2019

👍2

Alle 4 Kommentare

Meine erste Lektüre ist, dass dies ein Fehler ist.

gaearon am 8. Feb. 2019

Ich habe das gleiche Problem in Version 16.8.1 bemerkt. In meinem Fall gibt es jedoch keine gespeicherte Komponente zwischen der Stelle, an der ein Promise geworfen wird, und der Suspense -Komponente.

Die Komponente deklariert zwei Hooks oben, bevor Promise ausgelöst wird und die Warnung angezeigt wird. Ich habe den Anruf verschoben und die Promise nach oben geworfen, bevor die Haken und das gleiche passiert. Die Warnung verschwindet, wenn in der Komponente kein Promise ausgelöst wird.

Ein Mock meiner Komponente ist so etwas wie:

function Component(props) {
  const [state, setState] = useState()
  useEffect(...)

  // Promise is thrown somewhere after these two
  // hooks on top, but before the return statement.
  return (
    ...
  )
}

muqg am 9. Feb. 2019

Kann dies bestätigen.

ex3ndr am 12. Feb. 2019

Behoben in 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl

gaearon am 14. Feb. 2019

👍2

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

React: Warnung, wenn eine gespeicherte Komponente sowohl Hooks als auch Suspense verwendet

Hilfreichster Kommentar

Alle 4 Kommentare

Verwandte Themen