`componentWillMount` 警告可见，即使未明确使用 'componentWillMount'

Question

在我的代码中，我没有任何明确使用

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

相关

• 组件将安装警告
• https://reactjs.org/docs/react-component.html#componentwillmount

Answer 1

您收到此警告是因为

componentWillMount

在较新的 React 版本中已被弃用。如果您没有在任何地方使用

componentWillMount

，那么您的库之一就是并且需要更新。

如果这让您感觉好一些，您的生产版本将不会在控制台中显示这些警告。

如果您由于某种原因无法更新库，您可以尝试通过在

console.warn = () => {}

组件的顶部放置类似

App

的内容来抑制控制台中的这些错误，但我不建议这样做，因为那样您就不会这样做稍后可以在代码中使用

console.warn

。在您能够更新您的库之前，最好将它们视为烦恼。

Answer 2

如果您想使用这些方法，请在这些方法前加上 UNSAFE_ 前缀。这些方法被认为是“不安全的”，因为 React 团队预计依赖于这些方法的代码在 React 的未来版本中更有可能出现错误。因此，您可以使用 UNSAFE_componentWillMount 来抑制警告。

Answer 3

如果您想将所有已弃用的生命周期（例如 componentWillMount 或 componentWillReceiveProps）重命名为新名称，您可以在项目源文件夹中运行

npx react-codemod rename-unsafe-lifecycles

。

Answer 4

运行：

npx react-codemod rename-unsafe-lifecycles