Ant-design: Die Verwendung der <button>Ergebnisse in der Warnung "findDOMNode ist in StrictMode veraltet"</button>

Erstellt am 22. März 2020  ·  126Kommentare  ·  Quelle: ant-design/ant-design

  • [x] Ich habe die Probleme dieses Repositorys durchsucht und glaube, dass dies kein Duplikat ist * (Es wurde von jemand anderem gemeldet, aber nicht über Issue Creator, und es wurde automatisch geschlossen).

Reproduktionslink

https://github.com/latobibor/antd-tryout/commit/e373cb5038d88bf73358a05c8b37e0369dbaf478

Schritte zum Reproduzieren

  1. Abhängigkeiten installieren (npm i)
  2. App ausführen (npm start)
  3. Konsole überprüfen

Was wird erwartet?

Es sollten keine Warnungen angezeigt werden.

Was passiert eigentlich?

In console.log wird eine Warnmeldung angezeigt, die besagt: "Warnung: findDOMNode ist in StrictMode veraltet. FindDOMNode wurde eine Instanz von Wave übergeben, die sich in StrictMode befindet. Fügen Sie stattdessen eine Referenz direkt zu dem Element hinzu, auf das Sie verweisen möchten. Weitere Informationen zur Verwendung von refs sicher hier: "

| Umwelt | Info |
| --- | --- |
| antd | 4.0.3 |
| Reagiere | 16.13.1 |
| System | Windows 8.1 |
| Browser | Chrome 80 |


Die Ursache des Problems liegt in der Komponente <Button /> .

Siehe die betreffende Datei:
https://github.com/latobibor/antd-tryout/commit/e373cb5038d88bf73358a05c8b37e0369dbaf478#diff -b525f6f7c3584f9af17112d37dae3a42

help wanted

Hilfreichster Kommentar

Es ist lächerlich, den strengen Modus nur um einer Taste willen zu entfernen. Dies ist ein legitimes Problem mit antd, das behoben werden muss.

Alle 126 Kommentare

Ruhestand derTag in der Methode ReactDOM.render () funktioniert normal

Ich erhalte den gleichen Fehler im Strict Mode Antd v4.0.4

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

Gibt es eine Lösung in Bezug auf das gleiche oder irgendwelche Vorschläge wäre auch dankbar.

Es ist lächerlich, den strengen Modus nur um einer Taste willen zu entfernen. Dies ist ein legitimes Problem mit antd, das behoben werden muss.

Ich erhalte den gleichen Fehler

Sie müssen viel migrieren, z. B. # 9870

Das gleiche gilt hier nach einer Neuinstallation unter Verwendung des Handbuchs https://ant.design/docs/react/use-in-typescript

Ich habe das gleiche Problem

absteigend

Warnung: findDOMNode ist in StrictMode veraltet. findDOMNode wurde eine Instanz von Wave übergeben, die sich in StrictMode befindet. Fügen Sie stattdessen dem Element, auf das Sie verweisen möchten, einen Verweis direkt hinzu. Weitere Informationen zur sicheren Verwendung von Refs finden Sie hier: https://fb.me/react-strict-mode-find-node

lösen

ReactDOM.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>,
  ,
  document.getElementById('root')
);

Ich habe das gleiche Problem. Können Sie das bitte beheben?

Ich habe das gleiche Problem. Können Sie das bitte beheben?

Ich habe das gleiche Problem, aber ich verwende andere Komponenten, daher ist das Problem nicht nur das <Button /> .

Ich habe das gleiche Problem. Ich benutze

<InputMask
    mask='99/99/9999'
    onFocus={onFocus} onBlur={onBlur}
    defaultValue={fields.birthdate.value}
    error={fields.birthdate.error}
    helperText={fields.birthdate.helperText}
    id='birthdate' name='birthdate' label='Birthdate MM/DD/YYYY'
    type='tel' variant='filled' margin='dense'
>
    {(inputProps) =>
        <TextField {...inputProps} />
    }
</InputMask>

Die fragliche Linie scheint die zu sein Linie.

Das Deaktivieren des strengen Modus ist keine Option. Wie können wir das beheben?

Das Deaktivieren des strengen Modus ist keine Option. Wie können wir das beheben?

Tragen Sie dazu zum Migrationscode bei.

Ich habe dieses Problem auch in SubMenu- und Select-Komponenten.

Warnung: Die Legacy-Kontext-API wurde in einem Baum im strengen Modus erkannt.
Die alte API wird in allen 16.x-Versionen unterstützt, Anwendungen, die sie verwenden, sollten jedoch auf die neue Version migriert werden.
Bitte aktualisieren Sie die folgenden Komponenten: Untermenü

Ich habe die gleiche Warnung bekommen

Gleicher Fehler

Gleiches Problem auch :(

Noch eine hier, die mit Behinderten arbeitet, aber ich hoffe wirklich, dass es keine langfristige Lösung ist.

Gleicher Fehler

Gleiches Problem hier.

Gleiches Problem hier, hat das Ant-Team bereits eine Lösung?

Das Menü erzeugt auch diese Warnung:
<Menu mode="horizontal" >
Wenn ich den horizontalen Modus entferne, verschwindet die Warnung. Aber es ist keine Lösung.

Ich denke, es könnte eine große Sache sein, dies umzugestalten. Es kann erforderlich sein, in mehrere Komponenten zu graben.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DOMWrap which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in ul (created by DOMWrap)
    in DOMWrap (created by SubPopupMenu)
    in SubPopupMenu (created by Connect(SubPopupMenu))
    in Connect(SubPopupMenu) (created by Menu)
    in Provider (created by Menu)
    in Menu (created by Context.Consumer)
    in InternalMenu (created by Context.Consumer)

"antd": "^4.1.5"
"react": "^16.13.1"

Gleiches Problem, Hilfe !!! Bitte.

Hallo @latobibor. Ihr Vorschlag / Feedback gefällt uns sehr gut . Sie können eine Pull-Anfrage senden. Bitte senden Sie Ihre Pull-Anfrage an den richtigen Zweig (Feature-Zweig für das neue Feature, Master für Bugfix und andere Änderungen). Füllen Sie den Pull-Antrag aus Vorlage hier, stellen Sie bei Bedarf Änderungsprotokoll / TypeScript / Dokumentation / Testfälle zur Verfügung und stellen Sie sicher, dass CI bestanden wurde. Wir werden es bald überprüfen. Schätzen Sie es im Voraus und freuen uns auf Ihren Beitrag!

Hallo @latobibor, wir stimmen Ihrem Vorschlag / Feedback voll zögern Sie nicht, in diesem Lager eine Pull-Anfrage zu voreingestellte Vorlage in der Pull-Anforderung aus und geben Sie das entsprechende Änderungsprotokoll, TypeScript-Definitionen, Testfälle, Dokumente usw. an, die für die Änderungen erforderlich sind Und um sicherzustellen, dass CI bestanden wird, werden wir dies so schnell wie möglich überprüfen. Vielen Dank im Voraus und freuen uns auf Ihren Beitrag!

giphy

Gleicher Fehler

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in button (created by Context.Consumer)
    in Wave (created by Context.Consumer)
    in Button (at SignInPage/index.js:93)
    in div (created by FormItemInput)
    in div (created by FormItemInput)
    in div (created by Context.Consumer)
    in Col (created by FormItemInput)
    in FormItemInput (created by FormItem)
    in div (created by Context.Consumer)
    in Row (created by FormItem)
    in FormItem (at SignInPage/index.js:92)
    in form (created by ForwardRef(Form))
    in ForwardRef(Form) (created by ForwardRef(InternalForm))
    in SizeContextProvider (created by ForwardRef(InternalForm))
    in ForwardRef(InternalForm) (at SignInPage/index.js:43)
    in div (at SignInPage/index.js:42)
    in div (at SignInPage/index.js:33)
    in div (created by Context.Consumer)
    in Col (at SignInPage/index.js:32)
    in div (created by Context.Consumer)
    in Row (at SignInPage/index.js:31)
    in SignInPage (at AuthLayout/index.js:14)
    in Route (at AuthLayout/index.js:10)
    in Switch (at AuthLayout/index.js:7)
    in AuthLayout (at publicRoute.js:11)
    in Route (at publicRoute.js:9)
    in PublicRoute (at App.js:17)
    in Switch (at App.js:16)
    in Suspense (at App.js:15)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:14)
    in div (at App.js:13)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

Das gleiche Problem, ich habe gerade das Use-in-Typoscript- Dokument mit einer einfachen Demo wie dieser verfolgt:

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

Habe aber diesen index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here Fehler in der Konsole.

Wie repariert man?

Ich denke, wir sollten React.StrictMode deaktivieren und warten, bis das Ant-Design-Team dieses Problem behoben und das Paket aktualisiert hat.

das gleiche Problem hier und

Noch eine hier, die mit Behinderten arbeitet, aber ich hoffe wirklich, dass es keine langfristige Lösung ist.

genau

gleiches Problem in der neuesten Version (antd 4.2.0)

Gleicher Fehler
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

+1

Gleiches Problem hier
image .
Ein Fix wäre unglaublich! Danke und Team!

gleicher Fehler
image

also irgendwelche lösungen?

Plus eins

image
Gleicher Fehler.

Wenn Sie dieses Problem auch haben, beheben Sie es bitte!

Ich sehe auch dieses Problem mit Button.

Bitte repariere

Hier steht das gleiche Problem

Ich habe das gleiche Problem. Arbeitet jemand an diesem Problem?

Bist du sicher, dass es etwas mit Ameise zu tun hat? Ich bin zu Antd 3 gewechselt und habe immer noch das gleiche Problem

Ja, weil ich die

hier gilt das gleiche. Scheint ein ziemlich dringendes Problem zu sein. Ameise D wo bist du?

Arbeitet derzeit jemand an einer PR? Ich kann anfangen, eine zu schreiben

@ caelinsutch Soweit ich weiß, niemand.

Das Hauptproblem liegt in der Datei wave.tsx aufgrund der Verwendung von findDOMNode. Es gibt mehrere Migrationsartikel, wie diesen oder diesen

Problem gelöst mit:
Screen Shot 2020-05-12 at 10 30 01 PM

Inspiriert von einem offiziellen Beispiel: https://ant.design/components/form-cn/

Ich glaube nicht, dass Ihr Beispiel meinen Fall löst: https://github.com/ant-design/ant-design/issues/22493#issuecomment -619562638. Und auch ist nicht bekannt, was du überhaupt getan hast. Wenn du etwas getan hast.

@CathyXian Das Umschließen aller Schaltflächen in ein Formular löst das Problem nicht, da <Button> -Komponenten meistens nicht in Formularen verwendet werden, sondern stattdessen onClick -Ereignisse zugeordnet sind.

Wie @caelinsutch zeigte, verwendet die Wave-Komponente die veraltete Methode findDOMNode.

Als ich schnell überprüfte, welche Komponenten diese Methode verwenden, stellte ich fest:

Die Wellenkomponente sollte überarbeitet werden, um die alte Methode zu entfernen.
Und vielleicht sollten auch andere Komponenten diese Methode entfernen :

aus irgendeinem seltsamen Grund wird es nicht mit folgendem reproduziert:

  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

aus irgendeinem seltsamen Grund wird es nicht mit folgendem reproduziert:

  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

Ich habe es versucht und arbeite wie ein Zauber, aber diese Frage ist, sind es langfristige Lösungen?

aus irgendeinem seltsamen Grund wird es nicht mit folgendem reproduziert:

  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

Dies ist nicht anders als nur das Entfernen des verpackten <React.StrictMode> um <App> . Welches sollte nicht notwendig sein.

Auch mit Tabs-Komponente passiert

Hier gilt das gleiche,
Könnten Sie ihm bitte eine höhere Priorität geben?

gleiches Problem 😓

Ich habe hier das gleiche Problem, hat jemand eine Lösung gefunden?

Ich habe hier das gleiche Problem, hat jemand eine Lösung gefunden?

Ich meine, es gibt eine Lösung wie oben beschrieben, die den Code überarbeitet. Ich werde wahrscheinlich später in dieser Woche darauf zurückkommen

Vielen Dank! Ich habe das gleiche Problem auch!

gleicher Fehler

gleiches Problem

                  `<Button
                        htmlType="button"
                        icon={<LoginOutlined />}
                        onClick={this.onLogin.bind(this)}
                    >
                        Welcome Back
                    </Button>`

Ich habe das Attribut htmlType verwendet, bei dem dieses Problem immer noch auftritt. Das Entfernen von StrictMode ist keine Lösung. @antd bitte geben Sie die Lösung.

gleicher Fehler

Jede Lösung, gleiches Problem ....

gleiches Problem bei der Verwendung von SubMenu.
"reagieren": "^ 16.13.1",
"React-Dom": "^ 16.13.1",
"antd": "^ 4.3.1",

Gleiches Problem Ich benutze die Schaltfläche in der form.item


<Button type="primary" htmlType="submit" > LOG IN </Button>

"antd": "^ 4.3.1",

Warum untersuchen Sie dieses Problem nicht insgesamt? @ afc163

Gleiches Problem, irgendeine Lösung?

Gleiches Problem mit einem Untermenü im vertikalen Menü,

Gleiches Problem hier. Es kommt aus der Button -Komponente, aber ich denke, es ist tatsächlich in der Wave -Komponente, in componentDidMount und onTransitionStart . Könnten wir einfach einen Ref verwenden, anstatt findDOMNode(this) aufzurufen?

ich auch

+1

+1

+1

Ich wünschte, die Entwickler hätten die Konventionen befolgt und es vermieden, +1 zu setzen, um alle zu nerven, die diesen Thread per E-Mail abonniert haben. Das ist sehr nervig und unprofessionell, @kreuzhofer @Lemii @moderndegree @TechieQian @lefterisk und andere

Gleiches Problem hier bei Verwendung des Ant Design-Menüs

das gleiche Problem hier. brauche eine Lösung so schnell wie möglich

Gleiches Problem hier bei Verwendung des Ant Design Buttons

+1

Gleiches Problem hier.

Das gleiche Problem hier, würde wirklich eine Lösung oder Problemumgehung lieben, die nicht das Ausschalten des strengen Modus erfordert.

Ich stehe vor dem gleichen Problem

Gleiches Problem hier

gleiches Problem mit Untermenü

@Ant Team, ich würde vorschlagen, dies offen zu lassen, aber das Problem zu sperren und stummzuschalten. Diese zusätzlichen +1 und auch ich bieten absolut keinen Wert für die Lösung des Problems. Sie erstellen stattdessen Rauschen und Spam für diejenigen, die nach auffälligen Updates suchen. Wenn Sie helfen möchten, tragen Sie dazu bei und schneiden Sie Codeüberprüfungen ab.

Danke für alles was du tust! :) :)

Ich habe gerade antd in meinem React TypeScript-Projekt installiert und sobald ich eine Schaltfläche verwendet habe, wurde der Fehler ausgelöst. Es ist traurig herauszufinden, dass es dafür keine Lösung gibt: l

Gleiches gilt hier für den ant.design-Button.
"antd": "^ 4.6.3",
"reagieren": "^ 16.13.1",
"React-Dom": "^ 16.13.1",

Irgendwelche Updates? Oder Problemumgehung?

gleicher Fehler

In der ersten Codezeile wird ein Fehler gemeldet. . . Noch nicht repariert. .

Ich habe dieses Problem gerade bei der Verwendung eines Buttons in meinem Projekt entdeckt.
Ich bin auf "antd": "^ 4.6.2"

Gleiches Problem hier mit dem Modal.
Ich erhalte 2 Warnungen:
`index.js: 1 Warnung: Die Verwendung von UNSAFE_componentWillReceiveProps im strengen Modus wird nicht empfohlen und weist möglicherweise auf Fehler in Ihrem Code hin. Weitere Informationen finden Sie unter https://fb.me/react-unsafe-component-lifecycles .

  • Verschieben Sie Code oder Nebenwirkungen zum Abrufen von Daten nach componentDidUpdate.
  • Wenn Sie den Status aktualisieren, wenn sich Requisiten ändern, überarbeiten Sie Ihren Code, um Memoisierungstechniken zu verwenden, oder verschieben Sie ihn in den statischen Status getDerivedStateFromProps.`

ebenso gut wie :
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of AnimateChild which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

irgendwelche Updates?

Gleicher Fehler.

Dies muss behoben werden.

Problem auch hier unter 4.6.6 bei Verwendung einer Schaltfläche

Strikte Modusprüfungen werden nur im Entwicklungsmodus ausgeführt. Sie haben keinen Einfluss auf den Produktionsaufbau. So kann die Nachricht nervig werden ...
Sicher, das Auskommentieren ist keine gute Antwort, aber wenn es bei Ihnen nicht funktioniert, bieten Sie eine Lösung an?

Gleiches Problem mit Ameise 4.6.6 und Reaktion 16.13.1 :(

Leute, nur ein Vorschlag für den Fall, dass dieser Fehler für Sie ärgerlich ist:

const isDev = process.env.NODE_ENV === 'development'

ReactDOM.render(
  isDev ? <App /> : (
    <React.StrictMode>
      <App />
    </React.StrictMode>
  ),
  document.getElementById('root')
)

Prost!

@rafaelcalhau
Dies entspricht im Wesentlichen dem Entfernen von StrictMode, da nur Validierungen in der Entwicklungsumgebung durchgeführt werden. Sie haben also einfach alle Überprüfungen für Ihren eigenen Code deaktiviert. Genau dafür ist StrictMode gedacht.

gleicher Fehler.

Gleicher Fehler.

Gleicher Fehler

@ enoh-barbu Ich glaube nicht, dass jemand aktiv versucht, dies zu beheben.

So sehr ich es hasse, beim Öffnen der Konsole einen Fehler zu sehen, ist es gelinde gesagt lächerlich, den strengen Modus wegen dieses Fehlers zu entfernen.

Oben

Wie wäre es damit, wenn wir keine Lösung haben?

Vor)
image

nach)
image

das gleiche Problem bis jetzt.

das gleiche Problem bis jetzt.

das gleiche Problem bis jetzt

das gleiche Problem noch.

Immer noch kaputt

Wie wäre es damit, wenn wir keine Lösung haben?

Vor)
(großes Bild)

nach)
(großes Bild)

Noch besser: Wenn Sie die Konsole schließen, ist jede Warnung weg 😄

Spaß beiseite: Dieses Problem tritt auch bei mehreren Komponenten auf

immer noch das gleiche Problem
hilft, React.StrictMode loszuwerden

Frage an jeden, der dem Thread folgt ... was bedeutet das überhaupt (der Fehler speziell), und hat jemand den Code überprüft, um zu sehen, was ihn verursachen könnte (oder warum er wichtig ist). Ganz ehrlich, ich würde versuchen, das Problem zu beheben, aber ich habe nicht die Zeit (oder das Wissen über die Codebasis), um zu untersuchen, warum dies geschieht oder wo in der Codebasis der Fehler vorliegt.

edit: klar sollte ich hinzufügen, dass ich den Fehler auch erleide (obwohl ich ihn vor einigen Tagen nicht hatte, also frage ich mich, welche besonderen Umstände den Fehler auslösen, dh in welchen Situationen sich die veraltete Methode findDOMNode befindet auf Button angerufen?)

Vielleicht sollten wir anfangen, diesen Thread als eine gemeinsame Anstrengung zu behandeln und Situationen aufzulisten, in denen die Warnung auftritt, und mit der Fehlerbehebung beginnen, anstatt einfach "Ja, Fehler, bitte beheben" anzugeben.

@shawnpetros
Ich bin in keiner Weise ein Experte für die Codebasis, benutze sie jedoch häufig genug, um das Problem nicht nur beim Schaltflächenelement zu haben. Verbrachte einige Zeit mit Nachforschungen und stellte fest, dass findDomNode hauptsächlich in der Wellenkomponente verwendet wird. Was ist Welle? Von dem, was ich sammeln kann, ein Werkzeug, um Dinge zu animieren, wie zum Beispiel die Schaltflächenkomponenten.

Abgesehen von der Deaktivierung des strengen Modus (auf den ich zurückgegriffen habe, bis ein geeigneterer Fix verfügbar ist, oder ich habe Zeit, mehr über Wave zu erfahren, um selbst einen vorzuschlagen ...), ist das Hinzufügen des Codes möglicherweise einfacher eine PR, um Requisiten zum Deaktivieren der Wave-Nutzung zu verwenden, als die findDomNode-Nutzung vorerst vollständig zu ersetzen. Ein bisschen googeln wird zeigen, dass es sich nicht nur um ein Ameisen-Designproblem handelt (dh: https://stackoverflow.com/questions/61220424/material-ui-drawer-finddomnode-is-deprecated-in-strictmode), also würde ich annehmen nicht die am einfachsten zu implementierende Lösung, sonst wäre schon jemand darauf gesprungen. Da sich Änderungen nicht nur auf die Schaltfläche auswirken würden, müssen wir möglicherweise warten, bis die Entwickler des Ameisendesigns Zeit haben, dies stärker zu priorisieren, damit sie eine geeignete Lösung gründlich testen können. Ich schätze auf jeden Fall all ihre Arbeit, die sie geleistet haben Holen Sie es sich hier, also bin ich mir sicher, dass die Lösung genauso gut funktionieren wird wie die anderen!

bearbeiten:
Für alle, die neugierig sind, warum dies möglicherweise keine "einfache Lösung" ist, finden Sie hier einige Lösungsvorschläge zum Entfernen von findDomNode. https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660
Unter der Annahme, dass es mehrere Komponenten betrifft, wäre dies in der Tat eine größere Aufgabe, als jeder "freie" Zeit für ...

Gleicher Fehler

Dieses Ticket ist seit über 7 Monaten geöffnet.

Gleich

27755 Es gibt eine Pull-Anforderung, um dieses Problem zu beheben

+1

Ich weiß nichts über die Regeln in diesem Projekt, aber in anderen Communities wird davon abgeraten, "gleiche" und "+1" Kommentare zu spammen, weil

  • Wenn etwas ein dringendes Problem ist, sind sich die Entwickler dessen normalerweise bewusst.
  • es fügt nichts Wesentliches hinzu, um das Problem zu lösen,
  • Die Entwickler brauchen Zeit, um ihre Benachrichtigungen durchzugehen.
  • Es nimmt anderen Beobachtern Zeit, die ebenfalls viel Spam in ihren Benachrichtigungen haben.

Vielleicht können wir einfach Unterstützung für dieses Problem ausdrücken, indem wir Folgendes verwenden: +1: in der obersten Ausgabe.

Vielen Dank, dass Sie an dem Fix gearbeitet haben. Ich liebe die Bibliothek. Leider sehe ich diese Warnung immer noch mit [email protected].
Wird erst angezeigt, nachdem der Async-Validator ausgelöst wurde, wenn eine Eingabe in einem Formular verwendet wird.

Screen Shot 2020-11-18 at 5 07 27 PM

Ich habe das gleiche Problem mit [email protected]

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen