`componentWillMount`-Warnungen, obwohl nicht explizit verwendet

In meinem Code habe ich keine explizite Verwendung voncomponentWillMount , aber ich sehe immer noch einige Warnungen beim Ausführen webpack.

react-dom.development.js: 12386 Warnung: componentWillMount wurde umbenannt und wird nicht zur Verwendung empfohlen. Weitere Informationen finden Sie unter https://fb.me/react-unsafe-component-lifecycles.

Verschieben Sie Code mit Nebenwirkungen nach componentDidMount und legen Sie den Anfangszustand im Konstruktor fest.

Benennen Sie componentWillMount in UNSAFE_componentWillMount um, um diese Warnung im nicht strengen Modus zu unterdrücken. In React 17.x funktioniert nur der Name UNSAFE_. Um alle veralteten Lebenszyklen in ihre neuen Namen umzubenennen, können Sie sie npx react-codemod rename-unsafe-lifecyclesin Ihrem Projektquellordner ausführen .

Bitte aktualisieren Sie die folgenden Komponenten: foo, bar

Ich habe den Vorschlag ausgeführt npx react-codemod rename-unsafe-lifecycles, aber die Warnung ist nicht verschwunden, sondern hat nur den Wortlaut geändert

react-dom.development.js: 12386 Warnung: componentWillMount wurde umbenannt und wird nicht zur Verwendung empfohlen. [...]

Hier foound barsind beide benutzerdefinierten Komponenten unser Team geschrieben, und einige Komponenten von externen Bibliotheken. Eine vollständige Suche in der Visual Studio-Lösung nach componentWillMountDoese führt zu keinem Ergebnis. Könnte mir bitte jemand erklären, was ich falsch gemacht haben könnte?

Ich habe bei einer anderen Frage einen Kommentar gelesen

Ich habe keinen expliziten Platz bei componentWillMount, aber ich habe [...] eine Codezeile nach dem Konstruktor mit state={ tabindex:0 }Wie "verschiebe" ich das in den Konstruktor?

Die Antwort war zu schreiben constructor(props) {super(props); this.state = { tabindex:0 }}. Kann jemand bitte erklären, was hier los war? Nach welchen Mustern muss ich in unserem Code suchen?

Weitere Details

    printWarning    @   react-dom.development.js:12386
lowPriorityWarningWithoutStack  @   react-dom.development.js:12407
./node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings   @   react-dom.development.js:12577
flushRenderPhaseStrictModeWarningsInDEV @   react-dom.development.js:25641
commitRootImpl  @   react-dom.development.js:24871
unstable_runWithPriority    @   scheduler.development.js:815
runWithPriority$2   @   react-dom.development.js:12188
commitRoot  @   react-dom.development.js:24865
finishSyncRender    @   react-dom.development.js:24251
performSyncWorkOnRoot   @   react-dom.development.js:24223
scheduleUpdateOnFiber   @   react-dom.development.js:23590
scheduleRootUpdate  @   react-dom.development.js:26945
updateContainerAtExpirationTime @   react-dom.development.js:26973
updateContainer @   react-dom.development.js:27075
(anonymous) @   react-dom.development.js:27663
unbatchedUpdates    @   react-dom.development.js:24375
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:27662
render  @   react-dom.development.js:27756
./src/index.tsx @   index.tsx:52
__webpack_require__ @   bootstrap:19
0   @   bundle.js:152632
__webpack_require__ @   bootstrap:19
(anonymous) @   bootstrap:83
(anonymous) @   bootstrap:83

verbunden

javascript reactjs react-props

— B - rian
quelle

wahrscheinlich eine alte lib. Was sagt der Stack-Trace?

— Joe Lloyd

Ja, ich verwende antd in Version 2.x und kann dies aufgrund von Architekturproblemen nicht ändern. @ JoeLloyd Siehe Stack Trace in meiner Bearbeitung.

— B - rian

Wie Joe oben sagte, wird es mit ziemlicher Sicherheit antdverwendet cWM. Ich bin gespannt, auf welche Architekturprobleme Sie beim Aktualisieren antdstoßen würden. Es scheint ein offenes Problem auf Github in Bezug auf veraltete Lebenszyklusmethoden zu sein. Github.com/ant-design/ant-design/issues/9792

— DJ2

@ DJ2: Es ist unsere interne Architektur, die mit Antd3 nicht funktioniert.

— B - rian

Diese Warnung componentWillMountwird angezeigt, da sie in neueren React-Versionen veraltet ist. Wenn Sie componentWillMountnirgendwo verwenden, befindet sich eine Ihrer Bibliotheken und diese muss aktualisiert werden.

Wenn Sie sich dadurch besser fühlen, werden diese Warnungen in Ihrem Produktions-Build nicht in der Konsole angezeigt.

Wenn Sie Update - Bibliotheken aus irgendeinem Grunde nicht in der Lage sind, können Sie versuchen , diese Fehler in der Konsole unterdrücken , indem etwas wie wenn man console.warn = () => {}an der Spitze Ihrer AppKomponente , aber ich würde nicht empfehlen , da dann werden Sie nicht in der Lage sein zu verwenden console.warnspäter in Ihrem Code. Akzeptieren Sie sie am besten nur als Ärger, bis Sie Ihre Bibliothek aktualisieren können.

— Matt Croak
quelle

Der Teil über den Produktionsaufbau ist hilfreich!

— B - rian

Wenn ich genau diese Seite bei geöffneter Konsole lade, werden Warnungen zu Komponenten angezeigt. Ich kann mir vorstellen, dass dies nicht mehr der Fall ist, nachdem SO irgendwo einige Updates durchgeführt hat.

— William Jockusch

In meinem Fall emotionverursacht eine gestaltete Komponente diese Warnung. Ich hoffe sie werden bald aktualisiert.

— Uddesh_jain

Vielen Dank. Aber ich würde eine ausführlichere Antwort erwarten, die einen Algorithmus zum Auffinden der Schuldigen beschreibt. Wie in der Frage erwähnt, ist die Ausgabe der Warnung nicht sehr nützlich.

— Onkeltem

@Onkeltem ein Algorithmus, um herauszufinden, welche Bibliothek sie verwendet? Ich bin mir sicher, wie das gemacht werden würde, wenn Sie nicht auf den gesamten Quellcode der externen Bibliotheken zugreifen und alle crawlen können, um Instanzen von componentWillMount zu finden. Laut der Ausgabe des OP könnte das Problem beim Bootstrap liegen (siehe Ende weiterer Details).

— Matt Croak