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

Question

在我的代码中，我没有明确使用 componentWillMount，但是当运行ning webpack.

react-dom.development.js:12386 Warning: componentWillMount has been renamed, and is not recommended for use. See https:/fb.me/react-unsafe-component-lifecycles for details.

Move code with side effects to componentDidMount, and set initial state in the constructor.

Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: foo, bar

我做了运行建议的 npx react-codemod rename-unsafe-lifecycles，但警告并没有消失，只是将其措辞更改为

react-dom.development.js:12386 Warning: componentWillMount has been renamed, and is not recommended for use. [...]

这里，foo和bar都是我们团队写的自定义组件，还有一些外部库的组件。完整搜索 componentWillMount 的 Visual Studio 解决方案没有给我任何结果。有人可以向我解释我做错了什么吗？

我在 another question 看到一条评论说

I don't have any explicit place with componentWillMount, but I do have [...] a line of code after the constructor with state={ tabindex:0 } How do I "move" that into the constructor?

答案是写 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   @   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

相关

ComponentWillMount warning
https://reactjs.org/docs/react-component.html#componentwillmount

Answer 1

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

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

如果您出于任何原因无法更新库，您可以尝试通过在 App 组件的顶部放置 console.warn = () => {} 之类的内容来抑制控制台中的这些错误，但我不会推荐这个，因为你以后将无法在你的代码中使用 console.warn 。在您能够更新您的图书馆之前，最好只是接受它们作为一种烦恼。

Answer 2

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

来抑制警告

Answer 3

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

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

`componentWillMount` warnings visible even though 'componentWillMount' is not explicitly used

javascript

reactjs

react-props

更多详情

相关