时间戳

首页 > 解决方案 > `componentWillMount` 警告可见，即使 'componentWillMount' 没有明确使用

javascript - `componentWillMount` 警告可见，即使 'componentWillMount' 没有明确使用

问题描述

在我的代码中，我没有明确使用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

有关的

标签： javascriptreactjsreact-props

解决方案

您收到此警告是因为componentWillMount在较新的 React 版本中已弃用。如果您不在componentWillMount任何地方使用，那么您的库之一就是并且需要更新。

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

如果您由于某种原因无法更新库，您可以尝试在控制台中通过console.warn = () => {}在组件顶部放置类似的内容来抑制这些错误，App但我不建议您这样做，因为这样您以后将无法console.warn在您的代码。最好只是接受它们作为烦恼，直到您能够更新您的图书馆。

推荐阅读