课程中老师清除了一些警告，但是我的怎么这么多？
来源：5-1 详情页面的制作（1）
要每天学习的小蓝同学
2021-11-30 15:36:57
Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/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 18.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: BrowserRouter, Route, Router, Switch
printWarning @ react-dom.development.js:67
warn @ react-dom.development.js:34
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11524
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23822
commitRootImpl @ react-dom.development.js:23005
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:35
./src/index.js @ index.js:36
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ style.css?cc85:82
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
react-dom.development.js:67 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.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: Menu, PageList, Route, Router, Switch
printWarning @ react-dom.development.js:67
warn @ react-dom.development.js:34
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11530
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23822
commitRootImpl @ react-dom.development.js:23005
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:35
./src/index.js @ index.js:36
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ style.css?cc85:82
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
webpackHotDevClient.js:138 ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./node_modules/antd/dist/antd.css)
Warning
(168:11) Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
1回答
-
同学你好，警告的意思是，在新版本的react中，如下两个生命周期函数改名了：
建议同学使用新的生命周期函数或者更换其他生命周期函数。
视频中，老师的react版本是16，同学安装的应该是17，因此警告有区别。
建议同学忽略这些警告，一方面是因为我们学习的是16版本的react，如果换生命周期函数，那就要对应研究17版本的react写法，目前没必要。另一方面，componentWillReceiveProps这个生命周期函数，react17中提供的替代api无法实现我们当前的需求，而且这些警告并不会影响项目运行，只是提示作用。
祝学习愉快！
0
相似问题