私のコードでは、を明示的に使用していませんが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の名前が変更されたため、使用をお勧めしません。[...]
ここでは、foo
とbar
私たちのチームが書いた両方のカスタムコンポーネント、および外部ライブラリのいくつかのコンポーネントがあります。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
関連した
antd
を使用していcWM
ます。更新によってどのようなアーキテクチャ上の問題が発生するのか知りたいantd
です。古いライフサイクルメソッドに関するgithubの未解決の問題のようですgithub.com/ant-design/ant-design/issues/9792