明示的には使用されていませんが、 `componentWillMount`警告


9

私のコードでは、を明示的に使用していませんがcomponentWillMount、実行中にいくつかの警告が表示されますwebpack

react-dom.development.js:12386警告:componentWillMountは名前が変更されたため、使用をお勧めしません。詳細については、https:/fb.me/react-unsafe-component-lifecyclesを参照してください。

  • 副作用のあるコードをcomponentDidMountに移動し、コンストラクターで初期状態を設定します。
  • 非厳密モードでこの警告を抑制するには、componentWillMountの名前をUNSAFE_componentWillMountに変更します。React 17.xでは、UNSAFE_名のみが機能します。廃止されたすべてのライフサイクルの名前を新しい名前に変更するにnpx react-codemod rename-unsafe-lifecyclesは、プロジェクトのソースフォルダーで実行できます。

次のコンポーネントを更新してください:foo、bar

私は提案されたを実行しましたnpx react-codemod rename-unsafe-lifecyclesが、警告は消えませんでしたが、その表現を

react-dom.development.js:12386警告:componentWillMountの名前が変更されたため、使用をお勧めしません。[...]

ここでは、foobar私たちのチームが書いた両方のカスタムコンポーネント、および外部ライブラリのいくつかのコンポーネントがあります。Visual Studioソリューションを完全に検索しcomponentWillMountても結果は得られません。誰かが私に何が間違っていたのか説明してくれませんか?

別の質問でコメントを読んだ

で明示的な場所はありませんがcomponentWillMount、コンストラクターの後にコード行があります[...]コンストラクターstate={ tabindex:0 }に「移動」するにはどうすればよいですか?

答えは書くこと constructor(props) {super(props); this.state = { tabindex:0 }}でした。誰かがここで何が起こっていたか説明できますか?コードではどのようなパターンを探す必要がありますか?

さらなる詳細

    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

関連した


1
おそらく古いlibです。スタックトレースは何と言っていますか?
ジョーロイド

ええ、私はバージョン2.xでantdを使用していますが、アーキテクチャ上の問題のために変更することはできません。@JoeLloyd編集でスタックトレースを参照してください。
B--rian、

Joeが前述したように、ほぼ確実にantdを使用していcWMます。更新によってどのようなアーキテクチャ上の問題が発生するのか知りたいantdです。古いライフサイクルメソッドに関するgithubの未解決の問題のようですgithub.com/ant-design/ant-design/issues/9792
DJ2

@ DJ2:Antd3で動作しないのは内部アーキテクチャです。
B--rian、

回答:


11

componentWillMountは新しいReactバージョンでは非推奨であるため、この警告が表示されます。componentWillMountどこも使用していない場合は、ライブラリの1つが使用されており、更新する必要があります。

気分が良くなった場合、プロダクションビルドはこれらの警告をコンソールに表示しません。

何らかの理由でライブラリを更新できない場合console.warn = () => {}は、Appコンポーネントの上部に次のように配置することで、コンソールでこれらのエラーを抑制してみることができますが、console.warn後で使用することはできないので、これはお勧めしません。コード。ライブラリを更新できるようになるまで、それらを迷惑として受け入れることをお勧めします。


1
本番ビルドに関する部分が参考になります!
B--rian

価値があるのは、コンソールを開いたままこのページをロードすると、componentwillmountに関する警告が表示されることです。SOがどこかで更新を行った後は、これが当てはまらないと思います。
William Jockusch

1
私の場合、emotionスタイル付きコンポーネントがこの警告を引き起こしています。すぐに更新されることを願っています。
Uddesh_jain

ありがとう。しかし、私は犯人を見つけるアルゴリズムを説明する、もう少し複雑な答えを期待しています。質問で述べたように、警告の出力はあまり役に立ちません。
オンケルテム

@Onkeltemは、どのライブラリがそれらを使用しているかを見つけるアルゴリズムですか?すべての外部ライブラリのソースコードにアクセスでき、それらすべてをクロールして、componentWillMountのインスタンスを見つけることができない限り、それはどのように行われると私は確信しています。OPの出力によると、問題はブートストラップにある可能性があります(詳細の最後を参照)。
Matt Croak
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.