2017-09-26 1 views
1

Ohne einschließlich Code noch, ich frage mich, ob jemand in ein Problem hat läuft, wo Sie:Fehler in der React-Komponente, die dazu führt, dass die App erneut rendert, was zu einer Endlosschleife führt. Warum?

  • Haben Sie eine Komponente, die apollo-client
  • in connect und in meinem Fall gewickelt ist
  • Kind Komponenten auch in connect gewickelten das tun eine Depesche in componentWillMount
  • Werfen Sie einen Fehler in einer untergeordneten Komponente
  • eine Endlosschleife Get

Die Situation, in der ich bin, ist, dass jedes Kind, das einen Fehler auslöst, führt die übergeordnete Komponente wieder render und alle untergeordneten scheint componentWillMount auszuführen, abernicht ausführen.

Der Fehler wird nicht protokolliert und erscheint nicht in der Konsole, bis der Aufruf-Stack überläuft.

Dies führt dazu, dass sie alle erneut mit Redux verbinden, die Aktion absetzen sowie den Fehler erneut werfen, weil sie erneut mounten, was die Schleife verursacht.

Ich kann versuchen, repro, aber das wird ziemlich viel Zeit dauern, nur zu fragen, ob jemand in ein ähnliches Problem gerannt ist, das irgendwo bieten könnte, um zu schauen.

+0

Habe Apollo nicht benutzt und kann nicht sagen, dass ich das Problem erkenne. Aber zu Debugging-Zwecken würde ich wahrscheinlich versuchen, etwas in "componentWillMount" zu checken, bevor ich die Aktion erneut absende, und sehe, ob ich die Schleife durchbrechen könnte und hoffe, dass der Fehler auf diese Weise nicht verloren geht. Oder verwenden Sie Haltepunkte in 'componentWillMount', damit Sie sie jederzeit anhalten können. Und benutze Tools wie Redux devtools, um zu sehen, welche Aktionen ausgelöst wurden und ob sie die erwartete Nutzlast enthalten. Https://github.com/zalmoxisus/redux-devtools-extension – jonahe

Antwort

0

Sie sollten keine Aktionen in componentWillMount senden. Alles, was als veränderbar betrachtet wird, sollte in componentDidMount durchgeführt werden. ComponentWillMount ähnelt einem Konstruktor. Die Komponente wurde nicht bereitgestellt. Die Komponente kennt keinen Status (es sei denn, Sie geben ihn an), aber dieser Status wird nicht erfüllt, bis die Komponente tatsächlich bereitgestellt wird, was in componentDidMount geschieht. Im Idealfall sollten Sie sich an den Konstruktor halten und componentWillMount nicht wirklich verwenden. Für alle API-Aufrufe oder Dispatcher sollten Sie diese in cDM behalten

+0

Ohne Code zu sehen, kann ich dir nicht geben beste Antwort. Was ich oben gesagt habe, ist immer noch wahr, aber das wird wahrscheinlich nur einen Teil Ihres Problems lösen. Als Referenz dokumentiert React dies auch. Versuchen Sie es mit componentDidMount, ein wenig weiter unten auf dieser Seite Querverweise zu finden. https://reactjs.org/docs/react-component.html#componentwillmount –

0

Clayton hat recht; ComponentWillMount ist etwas von einem Anti-Muster, obwohl es einmal der Weg und die Wahrheit war. Sie möchten wahrscheinlich ComponentDidMount verwenden.

Da Sie jedoch Werfen erwähnt haben, ist es nichts wert, dass React 16 eine componentDidCatch lifecycle hook hat. Dies ermöglicht Ihnen, den Fehler zu fangen und verarbeiten es in reagieren:

Fehlergrenzen Komponenten reagieren werden, die JavaScript-Fehler irgendwo in ihrem Kind Komponentenbaum zu fangen, diese Fehler einzuloggen, und zeigt eine Ausweich UI

In der Theorie sollte dies Ihnen ermöglichen, den Fehler zu behandeln und connect kurzzuschließen.

Verwandte Themen